固定div位置，不随滚动条滚动

我们在html页面中的某处，可能要固定div的位置，下面我们编写js来控制

1、只能在初始页面的可视区域固定div

编写js代码：

jQuery.fn.floatdiv=function(location){//判断浏览器版本var isIE6=false;var Sys = {};    var ua = navigator.userAgent.toLowerCase();    var s;    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;if(Sys.ie && Sys.ie=="6.0"){isIE6=true;}var windowWidth,windowHeight;//窗口的高和宽//取得窗口的高和宽if (self.innerHeight) {windowWidth=self.innerWidth;windowHeight=self.innerHeight;}else if (document.documentElement&&document.documentElement.clientHeight) {windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;} else if (document.body) {windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight;}return this.each(function(){var loc;//层的绝对定位位置var wrap=$("<div></div>");var top=-1;if(location==undefined || location.constructor == String){switch(location){case("rightbottom")://右下角loc={right:"0px",bottom:"0px"};break;case("leftbottom")://左下角loc={left:"0px",bottom:"0px"};break;case("lefttop")://左上角loc={left:"0px",top:"0px"};top=0;break;case("righttop")://右上角loc={right:"0px",top:"0px"};top=0;break;case("middletop")://居中置顶loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};top=0;break;case("middlebottom")://居中置低loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};break;case("leftmiddle")://左边居中loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};top=windowHeight/2-$(this).height()/2;break;case("rightmiddle")://右边居中loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};top=windowHeight/2-$(this).height()/2;break;case("middle")://居中var l=0;//居左var t=0;//居上l=windowWidth/2-$(this).width()/2;t=windowHeight/2-$(this).height()/2;top=t;loc={left:l+"px",top:t+"px"};break;default://默认为右下角location="rightbottom";loc={right:"0px",bottom:"0px"};break;}}else{loc=location;alert(loc.bottom);var str=loc.top;//09-11-5修改：加上top为空值时的判断if (typeof(str)!= 'undefined'){str=str.replace("px","");top=str;}}/*fied ie6 css hack*/if(isIE6){if (top>=0){wrap=$("<div style=\"top:expression(documentElement.scrollTop+"+top+");\"></div>");}else{wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");}}$("body").append(wrap);wrap.css(loc).css({position:"fixed",z_index:"999"});if (isIE6){wrap.css("position","absolute");//没有加这个的话，ie6使用表达式时就会发现跳动现象//至于为什么要加这个，还有为什么要加nothing.txt这个，偶也不知道，希望知道的同学可以告诉我$("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");}//将要固定的层添加到固定层里$(this).appendTo(wrap);});};

在html页面中调用：

 $('#scoll_div_id').floatdiv({bottom:"50px"});

scoll_div_id当然为div的id属性，距离底部50px

2、可固定div出现的任何位置，让其不随浏览器滚动而变化

js脚本代码：

 $.fn.smartFloat = function() {     var position = function(element) {        var top = element.position().top, pos = element.css("position");        $(window).scroll(function() {            var scrolls = $(this).scrollTop();            if (scrolls > top) {                if (window.XMLHttpRequest) {                    element.css({                        position: "fixed",                        top: 0                    });                    } else {                    element.css({                        top: scrolls                    });                    }            }else {                element.css({                    position: "absolute",                    top: top                });                }        });    };    return $(this).each(function() {        position($(this));                             });  };

div调用：

//绑定
$("#float").smartFloat();

这种方式更加灵活，要比较两种的区别，大家得自己尝试一遍。

实例代码下载地址：http://download.csdn.net/detail/harderxin/4482704