JQuery实现DIV居右侧并随鼠标滚动而滚动

html
在线引入JQuery

...html头部



...

	

		右侧div栏随页面滚动而滚动
	

CSS 外联样式
绝对定位（设置后，默认处于浏览器左边，需要一个margin-left才能居右，通过JQuery动态实现，以便适应不同分辨率屏幕）

#menu_right{position:absolute;width:120px;height:400px;background-color:#D1EEEE;}

js代码 外部引入

$(document).ready(function () {
		//获取混杂模式或标准模式下的浏览器可视区宽度（兼容IE浏览器）
        var width = document.documentElement.clientWidth || document.body.offsetWidth;
        //获取div的宽度
        var menu_width = $("#menu_right").width();
        //计算该div需要margin-left的值（浏览器可视区宽度-div的宽=左外边距）
        var marginW = width-menu_width;
        //设定div的margin-left属性
        document.getElementById("menu_right").style.cssText="margin-left:"+marginW+"px";
        //获取div上边距高度
        var menuYloc = $("#menu_right").offset().top; 
        //触发window下鼠标滚动事件
        $(window).scroll(function () {
        	//当前高度=div上边距高度+鼠标滚动高度
            var offsetTop = menuYloc + $(window).scrollTop() + "px";
            //animate:JQuery自定义动画，向上margin:当前高度，并设定动画时限600毫秒,并设置queue队列为false,表示当鼠标滚动时，动画立即开始，即div随鼠标滚动而滚动
            $("#menu_right").animate({ top: offsetTop }, { duration: 600, queue: false }); 
        });
    });