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

Question

当用户在我的网站上向下滚动时，我想检测最顶部的标题何时不在 View 中。这可能与 jquery 吗？

Answer 1

如@RoryMcCrossan 所述，您可以自己计算。

如果你想要更多的灵 active ，试试这个 jQuery 插件:

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

它会让您根据元素是否在可见视口(viewport)内查询 DOM。

例如:

$("div:in-viewport")

将只返回当前可见的 div。

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

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

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

---

如果你想使用这个库来查询当前没有显示的元素，
不管他们在哪里，然后使用这个:

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

---

因此，假设您的 header 的 ID 为 header，您可以使用:

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

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