博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决IE6不支持position:fixed问题
阅读量:5960 次
发布时间:2019-06-19

本文共 1067 字,大约阅读时间需要 3 分钟。

hot3.png

很少的时候,界面上需要一个固定位置的块,不论页面怎么滚动,始终停在它的位置,比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用,很方便,但是万恶的IE6却不支持,下面讲两种方法解决这个问题。

方法一:

*html {/* 只有IE6支持 */    background-image: url(about:blank); /* 使用空背景 */    background-attachment: fixed; /* 固定背景 */}#box {    /* 非IE6浏览器使用固定元素 */    position: fixed;    top: 0;    left: 0;    /* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */    _position: absolute;    _top: expression(eval(document.documentElement.scrollTop));}

这个方法要注意的是,*html使用固定位置空背景目的是解决滚动的时候抖动的问题,原理是这样,滚动页面浏览器重新计算出网页,然后执行css,所以固定元素产生延迟的抖动,使用固定背景之后,在滚动的时候先执行了css,再重新计算网页,所以没有抖动问题了。

document.documentElement.scrollTop是滚动条偏移的值,可以根据这个来设置位置,比如document.documentElement.scrollTop+200或者使用margin定位也行。

方法二:纯css的解决方法

html { _overflow: hidden; }body { _height: 100%; _overflow: auto; }.box {    position: fixed;    left: 10px;    top: 180px;    _position: absolute;}

原理很简单,滚动条是body的滚动,固定元素是相对body定位,那么把它设置窗口那么高,不就一直是在窗口那个位置了?

最后,我选择的是方法一。

虽然第二种看起来简单,但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug,不太敢用。第一种方法感觉安全一些,而且可以查看淘宝网,也是用的第一种方法。

转载于:https://my.oschina.net/u/1040928/blog/171315

你可能感兴趣的文章
知道双字节码, 如何获取汉字 - 回复 "pinezhou" 的问题
查看>>
linux中cacti和nagios整合
查看>>
Python高效编程技巧
查看>>
Kafka服务端脚本详解(1)一topics
查看>>
js中var self=this的解释
查看>>
面试题
查看>>
Facebook 接入之获取各个配置参数
查看>>
linux的日志服务器关于屏蔽一些关键字的方法
查看>>
事情的两面性
查看>>
只要会营销,shi都能卖出去?
查看>>
sed单行处理命令奇偶行输出
查看>>
VC++深入详解学习笔记1
查看>>
安装配置discuz
查看>>
线程互互斥锁
查看>>
KVM虚拟机&openVSwitch杂记(1)
查看>>
win7下ActiveX注册错误0x80040200解决参考
查看>>
《.NET应用架构设计:原则、模式与实践》新书博客--试读-1.1-正确认识软件架构...
查看>>
2013 Linux领域年终盘点
查看>>
linux学习之查看程序端口占用情况
查看>>
相逢在栀枝花开的季节
查看>>