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

Question

我想要做的是从窗口顶部起1​​0px的固定导航栏，除非它位于文档的第一个200像素内，那么我希望它距离文档的第一个200像素顶部...

所以基本上我想要一个从顶部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