当页面有滚动条时候,如果在顶部有一个层,我们希望那个层始终都在那个位置不随滚动条滚动
可以用以下方法实现
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
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 >
< 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一下*/