首页 > web前端开发 > jQuery开发 > 如何用jquery写一个拖动导航固定到顶部的web程序
2013
06-12

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

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

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

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

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

如何用jquery写一个拖动导航固定到顶部的web程序 - 第1张  | 前端开拓者

 

为了避免大家在看长篇文章时,右侧没有任何内容显得单调,所以加上类似的滚动固定的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代码即可应用在大多数情况下。

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!