固定导航栏有两种不同的状态

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