NO.28 滚动条滚动层固定位置不变

当页面有滚动条时候，如果在顶部有一个层，我们希望那个层始终都在那个位置不随滚动条滚动

可以用以下方法实现

 

代码

<! 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"   />
< title > 滚动条滚动层固定 </ title >
< style >
* {
    padding : 0px ;
    margin : 0px ;
}
.container {
    height : 1000px ;
    background : #CCC ;
}
.suspend_box {
    width : 100px ;
    height : 50px ;
    background : #F00 ;
    border : 3px dashed #000 ;
    position : fixed ;
    left : 20px ;
    top : 20px ;
    _position : absolute ; /* IE6不支持position:fixed，这里hack一下 */
    _top : expression(eval(document.documentElement.scrollTop+20)) ; /* IE6不支持position:fixed，这里hack一下 */
}
</ style >
</ head >

< body >
< div  class ="container" >
     < div  class ="suspend_box" ></ div >
</ div >
</ body >
</ html >

 

 

由于IE6是不支持IE6不支持position:fixed，所以这里hack一下

 _position:absolute;/*IE6不支持position:fixed，这里hack一下*/
 _top:expression(eval(document.documentElement.scrollTop+20));/*IE6不支持position:fixed，这里hack一下*/

转载于:https://www.cnblogs.com/00fairy00/archive/2010/01/11/1644219.html