实现思路如下:
1.div最初位于公共文档流中
2.在窗口中添加一个滚动事件(可以被事件扼制),获取div偏移量的顶值,滚动时比较scrollTop值和top,到达顶部时给div添加一个固定类使其固定。
3.向上滚动时,当到达div的初始顶部时,固定类被删除,此时div返回正常的文档流
4.固定样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE表达式
渲染:
代码如下:
!doctype html head metharset=' utf-8 ' title无标题文档/title style * { margin 3360 0;padd : 0;} # div 1 { width : 100%;高度: 50px;背景skyblue} /style脚本window . onload=function(){ var oDiv=document . getelementbyid(' div 1 ');var divT=oDiv.offsetTop//console . log(DivT);Window.onscroll=function() {//获取当前页面滚动条的纵坐标位置(依次为Firefox Google、safari、IE 678)var scrollt=document . document element . scroltop | | window . page offset | | document . body . scroltop;if(scrollT=DivT){ if(window . navigator . user agent . indexof(' MSIE 6.0 ')!=-1) {//兼容IE6代码odiv . style . position=' absolute ';odiv . style . top=scrollT ' px ';odiv . style . left=0 ' px ';} else {//普通浏览器代码odiv . style . position=' fixed ';odiv . style . top=0;odiv . style . left=0;} } else Odiv . style . position=' ';} }/script/head dy Div class=' all ' over br高于br高于br高于br高于br br高于br div id='div1'/Div,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,la,La和La-la-la-la-la-la-la-la-la啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦。希望本文的内容能给大家的学习带来一些帮助