今天要做一个DIV随滚动条滚动的效果，本人记得08年写过几次，但是至今实在是写不出来，在群里朋友的帮助下，使用CSS达到了想要的效果。无奈在chrome下显示的效果不如人意。于是继续进行调整。需要注意的点如下：
1、父元素要相对定位
2、需要处理IE6不兼容的问题
3、left或 right控制，在窗口小化时，仍然可以看到悬浮的层
4、left或right的设置要设为百分比（比如下边我设置的是65%，但是这个百分比在IE6下可能出现不同于其他浏览器的效果，所以有可能需要对IE6单独设置一个百分比。）
5、重点代码：
position : fixed ; left : 65% ;/*解决chrome不兼容问题在于此处要用百分比*/ top : 160px ; z-index : 999 ; /* 为了让DIV永远在最前面，不被其他元素遮住 */ _position : absolute ; /* 这里开始的2句代码是为ie6不兼容position:fixed;而写的 */ _top : expression(eval(document.documentElement.scrollTop+160)) ; /* 这里需要获取滚动高度+元素原本的高度 */
_top:expression(eval(document.documentElement.scrollTop+documentElement.clientHeight-this.clientHeight));/*紧贴屏幕底部*/
下面贴上代码，也可以案例
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < meta content ="IE=EmulateIE7" http-equiv ="X-UA-Compatible" > <!-- 据说这个可以只需要兼容IE7 --> < title >无标题文档 </ title > < style type ="text/css" > * { margin : 0 ; padding : 0 ; border : 0 ; } #d { background : url(images/index_bg.jpg) repeat-y scroll center top transparent ; left : 50% ; margin-left : -500px ; position : relative ; width : 1000px ; } .top,.main,.bottom,.fixed { text-align : center ; } .top { background-color : #C30 ; height : 101px ; padding-top : 4px ; } .main { width : 980px ; margin : 20px auto 0 ; background-color : #FC0 ; padding : 10px ; } .main .cont { height : 900px ; } .main .cont .contL,.main .cont .contR { float : left ; } .main .cont .contL { width : 750px ; background-color : #93C ; height : 900px ; margin-right : 15px ; } .main .cont .contR { width : 210px ; background-color : #33F ; height : 500px ; } .bottom { background-color : #00F ; clear : both ; color : #373737 ; height : 192px ; margin : 10px auto ; overflow : hidden ; padding-top : 20px ; width : 1000px ; } .fixed { width : 190px ; line-height : 40px ; padding-top : 20px ; padding-bottom : 20px ; background-color : #999 ; position : fixed ; left : 65% ; top : 160px ; z-index : 999 ; /* 为了让DIV永远在最前面，不被其他元素遮住 */ _position : absolute ; /* 这里开始的2句代码是为ie6不兼容position:fixed;而写的 */ _top : expression(eval(document.documentElement.scrollTop+160)) ; /* 这里需要获取滚动高度+元素原本的高度 */ } </ style > </ head > < body > < div id ="d" > < div class ="top" >我是头 </ div > < div class ="main" > 我是主体 < br /> 有多少内容，我就有多高 < br /> < div class ="cont" > < div class ="contL" ></ div > < div class ="contR" ></ div > </ div > </ div > < div class ="bottom" >我是脚 </ div > </ div > < div class ="fixed" > 我要随滚动条滚动 < br /> 我要随滚动条滚动 < br /> 我要随滚动条滚动 < br /> </ div > </ body > </ html >