我正在尝试像www.callofduty.com/elite那样有一个垂直导航栏。正如您在此页面中看到的,右侧有 3 个导航链接(连接、竞争、改进)。当您向下滚动时,导航栏会向下移动一点,然后保持固定。
我有点得到滚动间谍,固定导航工作。但是导航栏不会向下移动一点并且保持固定。它只是固定在我放置的位置。如何达到那种效果?任何见解都会有所帮助。
这是我工作的链接http://jsfiddle.net/RJJ2J/
我正在尝试像www.callofduty.com/elite那样有一个垂直导航栏。正如您在此页面中看到的,右侧有 3 个导航链接(连接、竞争、改进)。当您向下滚动时,导航栏会向下移动一点,然后保持固定。
我有点得到滚动间谍,固定导航工作。但是导航栏不会向下移动一点并且保持固定。它只是固定在我放置的位置。如何达到那种效果?任何见解都会有所帮助。
这是我工作的链接http://jsfiddle.net/RJJ2J/
看演示
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;
}
使用这个waypoints 插件,它正是为了做你想做的事情