Question

我的页面有一张图片（#braille），当滚动为position:absolute时，0处于> 0，当position:fixed滚动> 900时当滚动为position:fixed时，其他一些元素会淡入。我要做的是让#braille图像在滚动时出现的2个元素之间“停止”（将position:absolute更改回{{ 1}} top:something允许它正确定位在2个元素之间。）

我认为你更清楚看看我创建的JSFiddle（我添加了一个文本，其中#braille图像应该在滚动时停止）：

http://jsfiddle.net/multiformeingegno/vde7ym94/7/

这是JS脚本：

$(function () {
    var timeoutId = null;

    // hide by default the arrow, the music sheet, the phrase and the yellow circle
    $('#ombra, #logopiano,#presentazione, #frase').hide();
    $("#braille").css({
        "position": "absolute",
            "top": "-56px",
            "left": 0,
            "margin": 0
    });
    $("#ombra").css({
        "top": "-56px"
    }).show();
    var w = $(window).height();
    var c = $("#homescroll").height();
    $("#homescroll").css({
        "height": w + 44 + "px"
    });

    // define the arrow
    var $freccia = $('#freccia1');

    // define the braille shadow
    var $ombra = $('#ombra');

    // define the music sheet image
    var $logopiano = $('#logopiano');

    // define the phrase and the yellow circle
    var $presentazionefrase = $('#presentazione, #frase');
    $(window).scroll(function () {
        scroll = $(window).scrollTop();


        if (scroll >= 900) {
            // events firing when scrolling down
            $("#intro").hide();
            $freccia.fadeOut('slow');
            $ombra.fadeOut('slow');
            $logopiano.fadeIn('slow');
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function () {
                $presentazionefrase.fadeIn('slow');
            }, 500);


        } else {
            // events firing when scrolling (back) up
            clearTimeout(timeoutId);
            $("#intro").show();
            if (scroll === 0) {
                $presentazionefrase.hide();
                $freccia.fadeIn('slow');
                $("#braille").css({
                    "position": "absolute"
                });
            } else {
                $("#braille").css({
                    "position": "fixed",
                        "margin": "auto",
                        "right": 0,
                        "top": "-56px"
                });
            };
            $logopiano.fadeOut('slow');
            if ($presentazionefrase.css('display') === "block") {
                $presentazionefrase.fadeOut('slow');
            }
            // make the braille shadow image visible only when at the top of the page
            if (scroll < 10) {
                $ombra.fadeIn('slow');
            } else {
                $ombra.fadeOut('slow');

            }

        }
    });
});

我以为我可以做这样的事，但它不起作用：

if ($("#braille").offset().top >= $("#frase").offset().top) {
    $("#braille").css({
        "position": "absolute",
            "top": $("#frase").offset().top + "px",

    });
};

问题是这应该适用于所有分辨率...这就是为什么我认为我可以解决这个问题来计算盲文图像与#frase元素的偏移量。

Answer 1

尝试：

if ($("#braille").offset().top + $("#braille").height() >= $("#logopianocontainer").offset().top + 90) {
        $("#braille").css({
            "position": "absolute",
            "top": $("#logopianocontainer").offset().top -  $("#braille").height() + 90 + "px"
        });
    };

<强> Here a working jsfidlle

请注意，我使用了$("#logopianocontainer") $("#frase") #frase {}} display: none #braille #logopianocontainer $("#braille").offset().top >= $("#logopianocontainer").offset().top $("#logopianocontainer") $("#braille") $("#logopianocontainer").offset().top - $("#braille").height()所以它的.offset（）。top是错误计算的。

另一方面请注意元素高度的使用，因为当你比较#braille时，这将使元素顶部之间进行比较，并且你想知道img的底部何时到达if (scroll >= 900) { // events firing when scrolling down } else { // events firing when scrolling (back) up if (scroll === 0) { ... } else { $("#braille").css({ "position": "fixed", "margin": "auto", "right": 0, "top": "-56px" }); };的位置，然后将#braille的顶部设置在#braille的位置，90值是将img定位在其他两个元素中间的估计值。

避免跳转

我发现为什么img会跳转，因为当滚动时，你会再次从绝对切换到固定（向上滚动） 900，并且有一个范围，fixed在被认为是绝对时是固定的，当通过它跳到该位置的范围时。

见这里

myData

所以你可以设置一个更具体的值（950看起来不错）或者让它更具动态性，例如当$scope.getData = function() { $scope.myData = []; $scope.shared.data.forEach(function(sData){ sData.forEach(function(group){ $scope.myData.push({sData: sData, group: group}); }); }); }定位到绝对放置一个变量来跟踪向下滚动时向下移动的距离然后当向上滚动时，减小变量，当变量为＆lt; 0你再次将<tbody> <tr ng-repeat="datum in getData()" class="representor"> <td>{{$index+1}}</td> <td>{{datum.sData.provider.number}}</td> <td>{{datum.group.subject}}</td> <td ng-if="! datum.group.categories"><a href="#" ng-click="addCategoryClick(datum.group)">הוסף קטגוריה</a></td> </tr> </tbody>切换到$('.menu-button').on('click', function(e) { e.preventDefault(); e.stopPropagation(); $('#sidebar').toggleClass('sidebar-open'); $('#cart').removeClass('cart-open'); $(document).one('click', function closeMenu (e){ //console.log("DF"); if($('#sidebar').has(e.target).length === 0){ console.log("DF"); $('#sidebar').removeClass('sidebar-open'); } else { $(document).one('click', closeMenu); } }); }); $('.cart-button').on('click', function(e) { e.preventDefault(); e.stopPropagation(); $('#sidebar').removeClass('sidebar-open'); $('#cart').toggleClass('cart-open'); $(document).one('click', function closeMenu (e){ //console.log("DF"); if($('#cart').has(e.target).length === 0){ $('#cart').removeClass('cart-open'); } else { $(document).one('click', closeMenu); } }); });，这只是一个想法，它可能比这更复杂。

Answer 2

当您尝试获取$("#frase").offset().top时，该值可能不正确，因为$("#frase")元素在某个时刻具有CSS display:none，因为使用了show ，hide，fadeIn和fadeout。

.offset()函数无法正确返回隐藏元素的偏移量。您可以考虑使用visibility或opacity来执行显示/隐藏技巧。

注意：jQuery不支持获取隐藏的偏移坐标   元素或计算边界，边距或填充   身体元素。

虽然可以获得元素的坐标   visibility：hidden set，display：none从渲染中排除   树，因此有一个未定义的位置。

滚动时，如果offsetTop是＆gt; =元素做某事

2 个答案: