chrome不兼容position:fixed 对联广告JS 不用JS做对联广告效果 CSS实现对联广告效果...

       今天要做一个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" >
< 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 >

转载于:https://www.cnblogs.com/Silvia/archive/2012/02/13/2349856.html