Javascript 使用Jquery根据到顶部的距离打开和关闭项目

我正在创建一个网站，其中有一些固定的背景图像，你滚动过去。与每个固定背景相关联的是一个图像滑块（或文本），该滑块在单击标题之前隐藏。这些项目都是固定定位的

我能够通过使用z索引将项目按从上到下/从前到后的顺序放置，然后使用以下方法依次消失，从而实现这一点：

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

$（文档）。滚动（函数（）{
$（'#porttitle'）.toggle（$（this.scrollTop（）<225）；
});

但是，我无法使用它，因为页面上的长度像素距离会根据屏幕大小而改变。我对Jquery非常陌生，但想尝试使用.offset.top使项目消失，这不是基于页面顶部的像素长度，而是当屏幕上出现元素时。到目前为止，这就是我所拥有的，但它似乎不起作用

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

$（文档）。滚动（函数（）{
$（'#porttitle'）.toggle（$（this.scrollTop（）<$（'article.post-100'）.offset（）.top）；
});

这里是网站的链接：（不是最终位置-只是开发）

有什么想法吗

---

谢谢

我认为这可能对您有用，请阅读代码上的注释，逐行解释

$(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
        }
    });
});

$（窗口）。当用户滚动时滚动（函数（）{//）
$（'div'）。每个（函数（）{//检查每个div
if（$（window.scrollTop（）<$（this.offset（）.top）{//如果窗口已滚动到div的顶部之外
$（this.css（'opacity'，'1'）；//将不透明度更改为1
}否则{//
$（this.css（'opacity'，'0'）；//将不透明度更改为0
}
});
});

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

…jQuery不支持获取隐藏对象的偏移坐标 元素，或用于在 身体元素

虽然可以使用 可见性：隐藏集，显示：从渲染中排除无 树，因此有一个未定义的位置

相关文档：

---

这似乎是个好主意。不过我还没能让它工作。我插入了它，并将“this”改为“before.offset”，当它显示时，另一个“this”（在.css之前使用）应该消失。但它不起作用。有什么想法吗？看看你的例子-区别在于应该消失的元素是固定的元素，我希望它消失的时间取决于窗口滚动到不同div顶部的时间。@natehoward不要更改

this

而是更改

$（'div'）。每个（…

如：

$（'.your\u elements\u class'）。每个（…

@natehoward这是假设您的所有元素都有一个公共类。如果它们没有，您可能想添加一个，这将使选择它们更容易，代码的冗余度也会降低。我明白了。我是个白痴，因为在元素周围有了“”所以它当然不起作用。非常感谢您！您是最好的。