平滑滚动导航栏

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处理剩下的事件。

如果您打开firebug / chrome dev工具并观看该元素，您实际上可以在标记处看到样式从position: absolute更改为position: fixed。