平滑滚动导航栏

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的样式更改。