具有兩種不同狀態的固定導航欄

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