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

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

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

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

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

为了避免大家在看长篇文章时，右侧没有任何内容显得单调，所以加上类似的滚动固定的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')
		}
	})
})