javascript - 滚动时，如果 offsetTop 是 >= element 做一些事情

Question

当 scroll 为 0 时，我的页面有一个位于 position:absolute 的图像 (#braille)，当 scroll 为 时> 0 它在 position:fixed 上。当滚动为 > 900 时，一些其他元素会淡入。我要做的是使 #braille 图像“停止”在滚动时出现的 2 个元素之间(更改 位置:固定 回到 position:absolute 与 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 位置的那一刻，所以它的 .offset().top 计算错误。

另一方面请注意元素高度的使用，因为当您比较 $("#braille").offset().top >= $("#logopianocontainer").offset( ).top 这将对元素的顶部进行比较，您想知道 img 的底部何时到达 $("#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，这只是一个想法，可能是比这更复杂。