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

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

---

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

您首先收听窗口的滚动事件，然后使用滚动值来知道要应用于元素的状态。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;
    }
});

var fixed=false，limit=50；
$（窗口）。滚动（函数（）
{
if（window.scrollTop<50&&fixed）
{
$（“#头”）.css（{position:“relative”}）；
固定=假；
}
否则如果（window.scrollTop>50&&！已修复）
{
$（“#头”）.css（{position:“fixed”}）；
固定=正确；
}
});

---

。必须进行一些修改，因为我正在使用jScrollPane。。。

$（'#jp container'）.bind（'jsp-scroll-y'，function（event，scrollPositionY）{if（scrollPositionY<190）$（“#导航”）.css（{position:'absolute'，top:'200px}）；else if（scrollPositionY>=190）（“#导航”）.css（{position fixed:'fixed'，top:'10px}）