平滑滾動導航欄

Question

我打算讓導航欄保持在固定位置，直到導航欄在滾動時到達瀏覽器窗口的頂部。

我能夠用jQuery來實現這一點，但它不順暢

 $(window).scroll(function() 
    {  var box = document.getElementById('box'), 
      scroll = $(window).scrollTop();  
      if (scroll <= 598) { $("#box").css("top",598); } 
      else { $("#box").css("top",scroll); } 
    }); 

運動如何能流暢喜歡這裏？

1. reference 1

我最終得到像this:

原諒我，如果我沒有詳細解釋這個問題。

Answer 1

你很近。 IGN只是在您超出滾動標記時進行監聽，並將該欄切換到固定位置。這樣瀏覽器只需處理一個滾動事件，然後CSS處理剩下的事情。

如果您打開螢火蟲/鍍鉻開發工具並觀察元素，您實際上可以在標記處看到從position: absolute到position: fixed的樣式更改。