<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ margin:0; padding:0; } .cssrain{ background:#BBB; border:2px double #000000; height:200px; 200px; padding:10px; /*加了padding 也无影响.*/ } </style> <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script> <script> /** * followDiv plugin (跟随屏幕滚动的DIV) * Copyright (c) 2008 CssRain (CssRain.cn) * (Use)使用方法： * $('#div1').followDiv(); * $('#div1').followDiv("rightbottom"); * $('#div2').followDiv("leftbottom"); * $('#div3').followDiv("lefttop"); * $('#div4').followDiv("righttop"); * 兼容 IE6+ ，FF2+ . * 如有问题，请联系我。Email: cssrain@gmail.com * 或者去我的blog 留言。http://www.cssrain.cn */;(function($) {$.fn.extend({ "followDiv":function(str){ var _self = this; var pos; //层的绝对定位位置 switch(str){ case("rightbottom")://右下角 pos={"right":"0px","bottom":"0px"}; break; case("leftbottom")://左下角 pos={"left":"0px","bottom":"0px"}; break; case("lefttop"): //左上角 pos={"left":"0px","top":"0px"}; break; case("righttop")://右上角 pos={"right":"0px","top":"0px"}; break; default : //默认为右下角 pos={"right":"0px","bottom":"0px"}; break; } /*FF和IE7可以通过position:fixed来定位，*/ _self.css({"position":"fixed","z-index":"9999"}).css(pos); /*ie6需要动态设置距顶端高度top.*/ if($.browser.msie && $.browser.version == 6) { _self.css('position','absolute'); $(window).scroll(function(){ var topIE6; if(str=="rightbottom"||str=="leftbottom"){ topIE6=$(window).scrollTop() + $(window).height() - _self.outerWidth(); }else if(str=="lefttop"||str=="righttop"){ topIE6=$(window).scrollTop(); }else{ topIE6=$(window).scrollTop() + $(window).height() - _self.outerWidth(); } _self.css( 'top' , topIE6 ); }); } return _self; //返回this，使方法可链。 }});})(jQuery);$(document).ready(function(){ $('#div1').followDiv(); $('#div2').followDiv("leftbottom"); $('#div3').followDiv("lefttop"); $('#div4').followDiv("righttop");}); </script></head><body><div style="100%;height:600px;">test</div><div class="cssrain" id="div1">跟随屏幕滚动的层1</div><div class="cssrain" id="div2">跟随屏幕滚动的层2</div><div class="cssrain" id="div3">跟随屏幕滚动的层3</div><div class="cssrain" id="div4">跟随屏幕滚动的层4</div><div style="100%;height:600px;">test</div></body></html>