当滚动时，如果offsetTop是>=元素，那么做一些事情

Question

我的页面有一个图像(#braille)，当滚动是0，滚动是> 0时，它在position:fixed上。当滚动是> 900时，其他一些元素就会褪色。我想要做的是在滚动时出现的两个元素之间的#盲文图像“停止”(用一个允许在两个元素之间正确定位的position:fixed将position:absolute改为position:absolute)。

我认为如果您查看我创建的JSFiddle (我添加了一个文本，当滚动时#盲文图像应该停止)：

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"
        });
    };

这是一个工作上的烦人的人

注意，我在$("#frase")中使用了$("#frase")，这是因为#frase在#braille到达#logopianocontainer的位置时就有display: none，因此对.offset().top的计算是错误的。

另一方面，请注意元素高度的使用，这是因为当您比较$("#braille").offset().top >= $("#logopianocontainer").offset().top时，这将使元素顶部与您想知道的元素顶部的比较何时到达$("#logopianocontainer")的位置，然后将$("#braille")的顶部设置为$("#logopianocontainer").offset().top - $("#braille").height()位置，90值是将img放置在其他两个元素中间的估计值。

避免跳跃式

我发现了img跳转的原因，这是因为当卷轴< 900时，您将从绝对切换到固定(滚动回滚)，并且在假定为绝对时，#braille是固定的，而当通过范围时，它会跳转到位置。

看这里

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"
        });
};

因此，您可以设置一个更具体的值(950看起来不错)，或者使其更具动态性--例如，当#braille定位为绝对放置一个变量时，该变量可以跟踪向下滚动时向下移动的距离，然后在滚动时减小变量，并且当变量<0时，再次将#braille切换到fixed时，这只是一个想法，它可能比这个更复杂。

Answer 2

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

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

注意: jQuery不支持获取隐藏元素的偏移坐标，也不支持计算主体元素上设置的边框、边距或填充。 虽然可以获得具有可见性的元素的坐标:隐藏集，但显示:无一个被排除在呈现树之外，因此具有一个未定义的位置。