javascript - 使用 Jquery 根据到顶部的距离打开和关闭元素

Question

我正在创建一个网站，其中有许多固定的背景图像，您可以滚动浏览这些图像。与每个固定背景相关联的是一个隐藏的图像 slider (或文本)，直到单击标题。这些元素都是固定位置的。

我能够通过使用 z-index 按从上到下/从头到尾的顺序放置元素然后让每个元素依次消失来完成这项工作:

$(document).scroll(function() {
    $('#porttitle').toggle($(this).scrollTop() < 225);
});

但是，我无法使用它，因为页面下方的长度像素距离会根据屏幕尺寸发生变化。我是 Jquery 的新手，但想尝试使用 .offset .top 让元素消失，而不是基于页面顶部的像素长度，而是当元素出现在屏幕上时。这是我到目前为止所拥有的，但它似乎没有用。

$(document).scroll(function() {
    $('#porttitle').toggle($(this).scrollTop() < $(‘article.post-100’).offset().top);
});

这是网站的链接:http://s416809079.onlinehome.us (不是最终位置 - 正在开发中)

有什么想法吗？

谢谢!

Answer 1

我认为这可能对您有用，请阅读代码注释以获得逐行解释。

Working Example

$(window).scroll(function () { // When the user scrolls
    $('div').each(function () { // check each div
        if ($(window).scrollTop() < $(this).offset().top) { // if the window has been scrolled beyond the top of the div
            $(this).css('opacity', '1'); //change the opacity to 1
        } else { // if not
            $(this).css('opacity', '0'); // change the opacity to 0
        }
    });
});

我有条件地更改不透明度而不是使用切换，因为:

...jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

While it is possible to get the coordinates of elements with visibility:hidden set, display:none is excluded from the rendering tree and thus has a position that is undefined.

相关文档:
.offset()
.each()
.scroll()
.scrollTop()