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

Question

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

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

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

Also related to this post for code example