javascript - 修复了具有两种不同状态的导航栏

Question

我想要做的是有一个固定的导航栏，距离窗口顶部 10px，除非它在文档的前 200px 内，然后我希望它距离顶部 200px ...

所以基本上我想要一个距离顶部 200 像素的导航栏，但是当用户向下滚动 190 像素时，导航栏会滚动，始终保持距离窗口顶部 10 像素。

Answer 1

您首先侦听窗口的滚动事件，然后使用滚动值来了解要应用到您的元素的状态。jQuery 示例：

var fixed = false, limit = 50;
$(window).scroll(function()
{
    if (window.scrollTop < 50 && fixed)
    {
        $("#header").css({ position: "relative" });
        fixed = false;
    }
    else if (window.scrollTop > 50 && !fixed)
    {
        $("#header").css({ position: "fixed" });
        fixed = true;
    }
});

也与这篇文章相关的代码示例