`
IT_hack
  • 浏览: 16380 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE6不支持position:fixed和滚动不闪烁(3种解决方法)

阅读更多

 

 

 

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

显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,

方法一:

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

这个方法要注意的是,*html使用固定位置空背景目的是解决滚动的时候抖动的问题,原理是这样,滚动页面浏览器重新计算出网页,然后执行css,所以固定元素产生延迟的抖动,使用固定背景之后,在滚动的时候先执行了css,再重新计算网页,所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值,可以根据这个来设置位置,比如document.documentElement.scrollTop+200或者使用margin定位也行。

方法二:纯css的解决方法

  1. html { _overflow: hidden; }
  2. body { _height: 100%; _overflow: auto; }
  3. .box {
  4.     position: fixed;
  5.     left: 10px;
  6.     top: 180px;
  7.     _position: absolute;
  8. }
复制代码

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

这种方法是最古老的一种方法,但我不喜欢这个方法,除非在特定效果里需要js才会用,不然不建议加载不必要的js!这个方法就不详细说了,网上一大堆,去度娘一下^

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

分享到:
评论

相关推荐

    IE6支持position:fixed完美解决方法

    本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题,这种方法是通过条件注释和CSS表达式来实现的。 首先,我们可以使用HTML的条件注释(Conditional Comments)来针对IE6加载特定的...

    ie6,ie7,ie8完美支持position:fixed的终极解决方案

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并...

    ie6 position:fixed解决方案

    本文将探讨两种在 IE6 中模拟 `position: fixed;` 的方法。 1. **纯 CSS 法**: 这种方法主要依赖于 IE6 特有的 * 选择器。通过将 `* html` 作为顶层选择器,我们可以针对 IE6 应用特定的样式。首先隐藏浏览器的...

    IE6中的position:fixed定位兼容性写法分享

    ` 结合使用,可以解决IE6中背景图片闪烁的问题,使背景固定在视口不随页面滚动。 接下来是针对不同方向固定的兼容性写法: 1. **头部固定**: ```css /* IE6 头部固定 */ html .fixed-top { position: absolute; ...

    ie6下定位bug解决

    在其他现代浏览器中,CSS的`position`属性如`relative`、`absolute`和`fixed`能很好地实现元素的定位,但在IE6中,这些属性的处理方式却大不相同,导致开发者需要进行特殊的“hack”来解决这些问题。 首先,IE6不...

    IE6 fixed的完美解决方案

    IE6浏览器对于CSS3中的position: fixed属性的支持并不完善,这在设计网页时给前端开发者带来了不小的挑战。随着IE7及以上版本的浏览器开始支持position: fixed属性,对于仍广泛使用的IE6浏览器,我们需要寻找其他...

    ie6 fixed bug的解决方法 (css+js)

    然而,IE6并不支持CSS的"fixed"定位,导致元素无法随页面滚动保持在屏幕上的固定位置。 解决这个问题的一种方法是结合使用CSS和JavaScript。首先,我们可以为元素设置一个"absolute"定位,然后通过CSS选择器来覆盖...

    jquery固定层顶部固定层和底部固定层IE6不抖动

    然而,IE6对CSS的固定定位支持并不完善,这可能导致在页面滚动时元素出现闪烁、抖动或者定位不准确的问题。 jQuery作为一个强大的JavaScript库,提供了许多功能来增强和优化网页交互,包括处理定位问题。然而,对于...

    css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0

    然而,IE6.0及以下版本的Internet Explorer浏览器并不完全支持`fixed`定位,导致了一些兼容性问题,比如元素在滚动时闪烁或者位置不正确。 在提供的代码中,我们可以看到为了兼容IE6.0,采用了以下策略: 1. **IE...

    CSS行为expression轻松实现IE6无抖动固定定位

    在早期的Web开发中,IE6浏览器的兼容性问题一直困扰着开发者,特别是它不支持CSS中的`position:fixed`属性,导致无法实现常见的固定定位效果。为了解决这一问题,开发者们通常会借助JavaScript来模拟固定定位。然而...

    div当滚动到页面顶部的时候固定在顶部实例代码

    标题中的“div当滚动到页面顶部的时候固定在顶部实例代码”描述了一个常见的网页设计技术,通常被...对于那些不支持`position: fixed`的旧版浏览器,如IE6,可以通过其他方法如`position: absolute`来达到类似效果。

    CSS 网页顶部固定工具栏拖动无闪烁实现代码

    总结来说,这个代码片段巧妙地结合了CSS的`position: fixed`、`z-index`、`expression`等特性,以及适当的布局和优化技巧,创建了一个在拖动滚动条时无闪烁的网页顶部固定工具栏。这种方法不仅适用于IE6以上的浏览器...

    Jquery 固定背景 滚动切换

    2. **CSS3属性**:如`background-size: cover`在旧版浏览器可能不支持,可以使用`background-position`和`background-repeat`来模拟类似效果。 3. **事件绑定**:确保`scroll`事件在所有浏览器中都能正确触发,可能...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)...

    ExtAspNet_v2.3.2_dll

    -删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)...

    CSS属性大全

    3. 重复(background-repeat):控制背景图像的平铺方式,有四种选择:不重复(no-repeat)、重复(repeat)、横向重复(repeat-X)、纵向重复(repeat-Y)。 4. 附加(background-attachment):用于控制背景图像...

    5月最新大厂前端高频核心面试题.pdf

    position:fixed在android下可能无效的问题通常可以通过改变视窗的fixed定位为absolute定位来解决。 动画最小时间间隔应根据动画复杂度和设备性能来确定,一般推荐使用requestAnimationFrame()方法。 li元素之间的...

Global site tag (gtag.js) - Google Analytics