这里是文章内页的小广告~

如何用jquery写一个拖动导航固定到顶部的web程序

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

如何用jquery写一个拖动导航固定到顶部的web程序(滚动固定顶部的web程序)?

具体效果是拖动滚动条,一旦屏幕滚动的区域超过元素所在的区域,元素会固定在顶端,并伴随屏幕滚动一直保持在顶端。

这样的程序在某些网站上可以大幅增加用户体验,从而获得良好的口碑。

今天我就在前段开拓者上增加了这样的一段jquery代码,使得网站右边的“随机文章”处得以实现类似的效果,如图:

20130612192354

 

为了避免大家在看长篇文章时,右侧没有任何内容显得单调,所以加上类似的滚动固定的jquery代码。

具体的代码实现方法如下:

JS代码部分:

$(function(){
navbod = $('#advancedrandomposts-5'); //选择目标元素
var nav = navbod.position(); //获取目标元素的位置;left,top的值
navWidth = navbod.width() //获取目标元素的当前宽度(因为使用position:fixed后,需要设定宽度才能保持元素的原始大小)
navbod.css('left',nav.left); //为元素设置X轴的位置
$(document).scroll(function(){ //监听scroll事件
navTop = $('body').scrollTop(); //获得当前页面滚动的长度
if(navTop >= nav.top-50) //通过对比元素的top值 和 页面滚动长度;如果页面滚动的长度超过元素的top位置时,对元素设定fixed定位。
{
navbod.css('position','fixed')
navbod.css('top','50px')
navbod.css('z-index','99')
navbod.css('background','#efefef')
navbod.css('width',navWidth)
}else{
navbod.css('position','static')
navbod.css('background','none')
}
})
})

CSS 和 HTLM部分没有太多限制,只要加载上面的JS代码即可应用在大多数情况下。