javascript - 如何检测元素是否未显示在屏幕上以进行滚动？

Question

当用户在我的网站上向下滚动时，我想检测最上面的标题何时不在视野范围内。这可以用jquery吗？

Answer 1

正如@RoryMcCrossan 提到的，您可以自己计算。

如果你想要更多的灵活性，试试这个 jQuery 插件：

http://www.appelsiini.net/projects/viewport

它会让你根据元素是否在可见视口内来查询 DOM。

例如：

$("div:in-viewport")

只会返回div当前可见的 s。

您还可以根据它们的位置查询不可见的元素。主要是：

$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

查看上面的链接以获取更多信息和下载。

---

如果你想使用这个库来查询当前未显示的元素，
无论它们在哪里，然后使用这个：

$("div").not(":in-viewport")

---

因此，假设您的标头的 ID 为header，您可以使用：

var $header = $('#header');

$(window).scroll(function()
{
    var isVisible = $header.is(':in-viewport');
    // Now show, hide, or do whatever you want...
});

Answer 2

您需要检查元素offset()的位置，使用窗口滚动的位置。像这样的东西：

$(window).scroll(function() {
    var $header = $("#header");
    var headerBottomPos = $header.offset().top + $header.height();
    if (headerBottomPos < this.scrollTop()) {
        // header is not being displayed
    }
});