gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:35:49 27 4
gpt4 key购买 nike

我正在尝试使用 www.callofduty.com/elite 中的垂直导航栏.正如您在此页面中所见,右侧有 3 个导航链接(CONNECT、COMPETE、IMPROVE)。当您向下滚动时,导航栏会向下移动一点,然后保持不变。

我有点像 scroll-spy,固定导航工作。但是导航栏不会向下移动一点并保持固定。它只是固定在我放置它的位置。如何达到那种效果?任何见解都会有所帮助。

这是我的作品的链接 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;
}

关于jquery - 垂直导航栏必须从顶部移动一点然后保持固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12749982/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com