html div 滚动

HTML 顶部DIV层固定 随滚动条移动 显示位置不变

IE6不支持position: fixed; bottom: 0;对于这个功能，几乎是前端攻城师的一个心痛，让更多人加入放弃兼容IE6的阵容，然而IE6可是在中国占着有绝大多数的用户，不兼容IE6，难道还要何自己的饭碗过不去吗？

对于解决IE6不兼容的方法，目前我只撑据两种，一种使CSS表达式处理，另一种用javascript辅助实现。不管用CSS表达式处理与javascript辅助实现，都会比用CSS实现的较果差。javascript实现的定位，在拖动滚动条时，会出现闪烁。用CSS表达式实现也会出现闪烁，但只要给多一个CSS样式，闪烁消失，唯一是缺点是对定位不太准。

如何做到高效的兼容各种浏览器呢？幸运的是这种情况只有IE6不支持position:fixed; bottom: 0; IE6以上的版本都可以有效的支持。

 

 

图片1

 

 

图片2

 

 

图片3

Ps:请注意GROUPON Logo的位置

Css代码：

       .logo_wrap{position: relative; }//主要用来IE6与别的浏览进行定位切换

       .logo{ float: left; _position:absolute; top: 0px; left:0px; z-index: 99999; }//_position:absolute,只有IE6识别

Javascript 代码：

       <scripttype="text/javascript">

$(window).scroll(function()//触发滚动条事件

{

       vartopscroll=$(document).scrollTop();//获出窗口的高度

       if(topscroll<68)//div层的位置，如果DIV层一开始是顶部的，可以移除这个决断条件

       {

              if($('.logo').css("position")=="absolute")//IE6情况

              {

                     $('.logo').css("top",0);

              }

              else//其它浏览器情况

              {

                     $('.logo').css('position','relative');

                     $('.logo').parent().css('top',68);//改变.logo_wrap层 top 的高度位置

              }    

       }

       else

       {

              if($('.logo').css("position")=="absolute")//IE6情况

              {

                     $('.logo').css("top",topscroll-68);

              }

              else//其它浏览器情况

              {

                     $('.logo').parent().css('position','fixed');

                     $('.logo').parent().css('top','0');

              }

       };

});

</script>

代码兼容chrome,IE6,IE7,IE8,半兼容Firefox.什么是半兼容Firefox？网站例示一开始没有考虑要做这么动态效果，在写CSS时，没有考虑进去，结果在其实的外面有overflow: hidden;导致在firexfox下移动效果给隐藏了。

       在写这文章时，我发现一个奇怪的现象，当初没有给.logo的父元素增加.logo_wrap,而是直接写style=” position: relative;”,出现以上现象，后来又改回来，这个现象出没出现，我也有点晕了。到底怎么回事？没有找到什原因所在，不过因此浏览兼容都没问题了。

   总之，写代码还是要规范点，免得各种混乱。