垂直导航栏必须从顶部移动一点,然后保持固定 [英] Vertical navigation bar must move a bit from top then stay fixed
本文介绍了垂直导航栏必须从顶部移动一点,然后保持固定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个垂直导航栏,如 www.callofduty.com/elite 。正如你可以看到在这个页面,右边有3导航链接(CONNECT,COMPETE,IMPROVE)。当您向下滚动时,导航栏会向下移动一点,然后保持固定。
I'm trying to have a vertical navigation bar as in www.callofduty.com/elite. As you can see in this page, to the right there are 3 nav links (CONNECT, COMPETE, IMPROVE). As you scroll down, the nav bar moves down a bit and then stays fixed.
我有一个滚动间谍,固定导航工作。但导航栏不下移一点,保持固定。它只是固定在我定位它。如何实现这个效果?任何洞察力都会有所帮助。
I kindof got scroll-spy, fixed nav working. But the nav bar doesn't move down a bit and stays fixed. It just stays fixed where I positioned it. How to achieve that effect? Any insight would help.
以下是我的工作链接 http ://jsfiddle.net/RJJ2J/
推荐答案
请参阅 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;
}
这篇关于垂直导航栏必须从顶部移动一点,然后保持固定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文