很多时候,界面上需要一个固定位置的块,不论页面怎么滚动,始终停在它的位置,比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用,很方便,但是万恶的IE6却不支持,下面讲两种方法解决这个问题。
如何解决“振动”的问题?
显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,
方法一:
这个方法要注意的是,*html使用固定位置空背景目的是解决滚动的时候抖动的问题,原理是这样,滚动页面浏览器重新计算出网页,然后执行css,所以固定元素产生延迟的抖动,使用固定背景之后,在滚动的时候先执行了css,再重新计算网页,所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值,可以根据这个来设置位置,比如document.documentElement.scrollTop+200或者使用margin定位也行。
方法二:纯css的解决方法
原理很简单,滚动条是body的滚动,固定元素是相对body定位,那么把它设置窗口那么高,不就一直是在窗口那个位置了?
方法三:js解决
这种方法是最古老的一种方法,但我不喜欢这个方法,除非在特定效果里需要js才会用,不然不建议加载不必要的js!这个方法就不详细说了,网上一大堆,去度娘一下^
最后,我选择的是方法一。
虽然第二种看起来简单,但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug,不太敢用。第一种方法感觉安全一些,而且可以查看淘宝网,也是用的第一种方法。
相关推荐
本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题,这种方法是通过条件注释和CSS表达式来实现的。 首先,我们可以使用HTML的条件注释(Conditional Comments)来针对IE6加载特定的...
ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并...
本文将探讨两种在 IE6 中模拟 `position: fixed;` 的方法。 1. **纯 CSS 法**: 这种方法主要依赖于 IE6 特有的 * 选择器。通过将 `* html` 作为顶层选择器,我们可以针对 IE6 应用特定的样式。首先隐藏浏览器的...
` 结合使用,可以解决IE6中背景图片闪烁的问题,使背景固定在视口不随页面滚动。 接下来是针对不同方向固定的兼容性写法: 1. **头部固定**: ```css /* IE6 头部固定 */ html .fixed-top { position: absolute; ...
在其他现代浏览器中,CSS的`position`属性如`relative`、`absolute`和`fixed`能很好地实现元素的定位,但在IE6中,这些属性的处理方式却大不相同,导致开发者需要进行特殊的“hack”来解决这些问题。 首先,IE6不...
IE6浏览器对于CSS3中的position: fixed属性的支持并不完善,这在设计网页时给前端开发者带来了不小的挑战。随着IE7及以上版本的浏览器开始支持position: fixed属性,对于仍广泛使用的IE6浏览器,我们需要寻找其他...
然而,IE6并不支持CSS的"fixed"定位,导致元素无法随页面滚动保持在屏幕上的固定位置。 解决这个问题的一种方法是结合使用CSS和JavaScript。首先,我们可以为元素设置一个"absolute"定位,然后通过CSS选择器来覆盖...
然而,IE6对CSS的固定定位支持并不完善,这可能导致在页面滚动时元素出现闪烁、抖动或者定位不准确的问题。 jQuery作为一个强大的JavaScript库,提供了许多功能来增强和优化网页交互,包括处理定位问题。然而,对于...
然而,IE6.0及以下版本的Internet Explorer浏览器并不完全支持`fixed`定位,导致了一些兼容性问题,比如元素在滚动时闪烁或者位置不正确。 在提供的代码中,我们可以看到为了兼容IE6.0,采用了以下策略: 1. **IE...
在早期的Web开发中,IE6浏览器的兼容性问题一直困扰着开发者,特别是它不支持CSS中的`position:fixed`属性,导致无法实现常见的固定定位效果。为了解决这一问题,开发者们通常会借助JavaScript来模拟固定定位。然而...
标题中的“div当滚动到页面顶部的时候固定在顶部实例代码”描述了一个常见的网页设计技术,通常被...对于那些不支持`position: fixed`的旧版浏览器,如IE6,可以通过其他方法如`position: absolute`来达到类似效果。
总结来说,这个代码片段巧妙地结合了CSS的`position: fixed`、`z-index`、`expression`等特性,以及适当的布局和优化技巧,创建了一个在拖动滚动条时无闪烁的网页顶部固定工具栏。这种方法不仅适用于IE6以上的浏览器...
2. **CSS3属性**:如`background-size: cover`在旧版浏览器可能不支持,可以使用`background-position`和`background-repeat`来模拟类似效果。 3. **事件绑定**:确保`scroll`事件在所有浏览器中都能正确触发,可能...
-删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)...
-删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)...
3. 重复(background-repeat):控制背景图像的平铺方式,有四种选择:不重复(no-repeat)、重复(repeat)、横向重复(repeat-X)、纵向重复(repeat-Y)。 4. 附加(background-attachment):用于控制背景图像...
position:fixed在android下可能无效的问题通常可以通过改变视窗的fixed定位为absolute定位来解决。 动画最小时间间隔应根据动画复杂度和设备性能来确定,一般推荐使用requestAnimationFrame()方法。 li元素之间的...