垂直导航栏必须从顶部移动一点然后保持固定

我正在尝试使用www.callofduty.com/elite中的垂直导航栏。 正如您在此页面中看到的那样，右侧有3个导航链接（CONNECT，COMPETE，IMPROVE）。 向下滚动时，导航栏向下移动一点然后保持固定。

我有点滚动间谍，固定导航工作。 但导航栏不会向下移动并保持固定。 它只是在我定位的地方保持固定。 如何实现这种效果？ 任何见解都会有所帮助

这是我工作的链接http://jsfiddle.net/RJJ2J/

Answer 1

看看DEMO

jQuery的

$(function(){ // this is the shorthand for document.ready $(document).scroll(function(){ // this is the scroll event for the document scrolltop = $(document).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user if(parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation { $("#navbar").css({"position":"fixed","top":"0"}); // is yes then make the position fixed to top 0 } else { $("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80 } }) }); 

CSS

 #navbar{ position: absolute; // Initially set to absolute so it is movable with the page top: 80px; right: 100px; /*display: block;*/ padding-right: 7px; background: #fff; } 

Answer 2

使用这个waypoints插件 ，它完全按照你要做的去做