让IE6支持fixed的简单方法

By
WP札记

最近感觉很忙,又有点闲时间来更新博客。折腾着折腾着发现一个小问题:在主题制作或者修改中一些元素要设置为随页面滚动的效果,通常的做法是加上fixed属性,或者干脆用js实现这个功能。

不过对于懒得去后台更新js文件的同学来说,这不是个好办法,或者对于还未引入js的同学,这更不是好办法。但是不用的话在IE6下会无效,这个经典到目前访问量的半数以上的浏览器版本是直接无视fixed的(当然还有其他若干问题,所以希望更新或扔掉该浏览器)。

关于这个问题的解决办法,我之前的做法一直是用_position:absolute来暂时修订,当然这么做产生的效果和想象中的差距很大。最近发现一个方法来修正IE6的fixed效果,如下:

也是一个简单的hack,对于不想引入JS又迫切希望使用fixed属性的人来说,确实是个好办法。

More:

Q:有时候好像使用document.body.scrollTop来获取滚动条滚动的长度,结果滚动后得到的也是0,为什么改用document.documentElement.scrollTop就可以了?

A:可以查看一下源代码,如果没有

这一句那么可以用document.body.scrollTop,否则只能用document.documentElement.scrollTop

原因:在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;document.documentElement.scrollTop中documentElement 对应的是 html 标签;document.body.scrollTop 中 body 对应的是 body 标签。

0

Comments: 92

  1. 我正好要用到耶,不错不错

    2010年06月29日
    • @万戈 我测试完没啥问题~就是IE6下的位置还要再重新定~万哥加油折腾! :cool:

      2010年06月29日
    • @阿修 刚才留言comments-ajax.php有报错,再来测试一下 :grin:

      2010年06月29日
    • @阿修 果然还有错。。。

      2010年06月29日
    • @万戈 被你发现了,我在改主题……

      2010年06月29日
    • @阿修 再回个试试

      2010年06月29日
  2. 一向都无视哀翼流啊 :?:

    2010年06月29日
    • @Mucid 我也想无视它,可是看看访问者,一般多都是IE6……win7快快普及吧

      2010年06月29日
    • @阿修
      Linux快点普及吧 :cool:

      2010年06月29日
    • @Mucid 那估计有点难度,毕竟不是每个人都热爱命令的

      2010年06月29日
  3. 我的主题就是用了大量的fixed的元素,就是用的你说的这个方法。
    还要区分顶部固定和底部固定,不过还是没调整好

    2010年06月29日
    • @winy 多试试就可以了,我这个顶部栏也测试了好几次。IE6下元素是从当前位置开始算的,而不是整个页面~~放的位置会很郁闷……

      2010年06月29日
    • @阿修 我是左侧,顶部,右侧和底部统统都用fixed,那叫一个麻烦

      2010年06月29日
    • @winy 我晕啊,听着就很棘手,你继续加油吧~~铁杵磨成针

      2010年06月29日
  4. 顶部的这个导航很好用,拿走

    2010年06月29日
    • @winy 哈哈,拿走吧~

      2010年06月29日
  5. ie6 好久都没用了 不过学习了

    2010年06月29日
    • @zzzhu 但是访问者会使用啊~~

      2010年06月29日
  6. 最近忙期末考试 好久没有串门了~
    过来转转
    顺便点下ad~

    2010年06月30日
  7. fixed会影响平滑滚动的流畅度。。我用userjs消灭了fixed。。
    一切为了流畅

    2010年06月30日
    • @A.shun 我好像没什么感觉……至少chrome挺流畅的。

      2010年06月30日
    • @阿修 那你是没用过 平滑滚动
      Opera 特有功能,FF和chrome需要额外的扩展实现 :lol:

      2010年06月30日
    • @A.shun 不是很喜欢opera的平滑滚动效果

      2010年06月30日
  8. 方法很不错
    我现在已经决定放弃IE6了

    2010年06月30日
    • @园子 希望更多人放弃才好哈~~

      2010年06月30日
  9. 额,看不懂,不发表意见~

    2010年06月30日
  10. IE6要被消灭了吧

    2010年06月30日
    • @先看看 微软都给他判死刑了,但是国内还没办法~~

      2010年06月30日
  11. 微软都放弃IE6了,可偏偏国内的装机商/浏览器套壳者还不放弃,唉!

    2010年06月30日
  12. 好办法..嗯.好办法.不过话说我好久没用IE了。。 :cool:

    2010年06月30日
    • @虾 虾是好同学哈,我也不用IE~ :cool:

      2010年06月30日
  13. 黑色背景配广告位很好看 哈哈哈~~来水一下~

    2010年06月30日
    • @宋夏 水吧水吧我不怕。黑色确实耐看

      2010年06月30日
  14. 还没用,感觉主要是现在还用不上,可以保存在文档里 等有的时候就能找到了。 :lol:

    2010年06月30日
    • @7cbt 以后会用到的。 :grin:

      2010年06月30日
  15. 好久没有用IE6了,现在在 win7 的ie8下

    2010年06月30日
    • @ppg 支持win7的普及! :roll:

      2010年06月30日

流年进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: