`
trarck
  • 浏览: 28728 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ie6模拟fixed不抖动的方法

    博客分类:
  • css
阅读更多
由于ie6下position没有fixed,只有改变top和left来实现。
方法一:css的expression
.fixed{
    position:absolute;
    left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);
    top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
}
方法二:监听scroll事件(不能用attachEvent,其它二种都行)
document.documentElement.onscroll=function(){
       fixedA.style.left=de.scrollLeft+de.clientWidth-fixedA.offsetWidth+"px";
       fixedA.style.top=de.scrollTop+de.clientHeight-fixedA.offsetHeight+"px";
}
仅仅如些还不够,我们要fixed的元素为闪动。
我们要给html或body设置background: url(*) fixed;
即可解决闪动。
实际用下来监听scroll事件没有expression效果好。快速拖动滚动条还是有点卡。
注:如果没有设置DOCTYPE则documentElement要用body代替。
分享到:
评论

相关推荐

    超简单在IE6中实现Fixed效果并无抖动的返回顶部

    在IE6中,由于不完全支持`fixed`,我们需要寻找替代方案来模拟这一效果。 一种常见方法是使用JavaScript或jQuery来实现。我们可以监听滚动事件,当用户滚动页面时,计算元素应该出现在屏幕上的位置,然后通过修改...

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

    标题“jquery固定层顶部固定层和底部固定层IE6不抖动”指出的问题正是这样一个典型场景,涉及到jQuery库在IE6下处理固定定位元素时可能出现的抖动现象。 首先,我们需要理解什么是固定定位(fixed positioning)。...

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

    在早期的Web开发中,尤其是针对Internet Explorer 6 (IE6) 的兼容性问题,开发者经常面临一个挑战:IE6不支持CSS中的`position: fixed`属性,这意味着无法实现元素随滚动条固定显示的效果。然而,为了在IE6中模拟这...

    IE6下position fixed失效的解决方法(亲测有效)

    // 如果是IE6,使用expression模拟fixed定位 if (isIe6) { objThis.css('position', 'absolute'); domThis.style.setExpression('left', 'eval((document.documentElement).scrollLeft + ' + o.x + ') + "px"');...

    IE6不兼容position:fixed属性的解决办法分享

    总之,`position: fixed` 在 IE6 中的不兼容是前端开发中常见的问题,解决方法包括使用 CSS 表达式模拟和 JavaScript 插件。尽管这些方法能提供一定程度的兼容性,但随着技术进步,逐步淘汰对过时浏览器的支持,转而...

    详解IE6中的position:fixed问题与随滚动条滚动的效果

    但在IE6中,由于缺乏对position: fixed的支持,开发者不得不采取一些变通的方法来实现类似效果。 从给定文件中提供的内容来看,问题的核心在于如何在IE6中模拟position: fixed的行为,尤其是在滚动时元素仍然能够...

    css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法

    ### CSS兼容IE6、IE7及Firefox的Fixed定位方法 #### 背景与目标 在Web开发过程中,为了确保网站在不同浏览器上的兼容性,开发者经常需要采取一系列措施来应对旧版本浏览器(如IE6、IE7)的限制。其中,`position: ...

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

    IE6不支持`position: fixed`,但支持`position: absolute`。因此,开发者可以使用绝对定位结合JavaScript表达式来模拟固定定位的效果。 - **顶部固定**: 对于类名为`.fixed-top`的元素,我们使用`top: ...

    ie6下实现position:fixed效果实例介绍

    在IE6浏览器中,`position:fixed`是一个棘手的问题,因为这个浏览器并不原生支持这一CSS定位方式。`position:fixed`允许元素相对于浏览器窗口进行定位,即使页面滚动,该元素仍然保持在屏幕的固定位置。这对于创建如...

    基于jquery的返回顶部效果(兼容IE6)

    由于IE6不支持`position:fixed`,我们使用了`_position:absolute`以及`_top:expression`来模拟固定定位,`expression`函数会根据文档的滚动位置动态调整div的位置。同时,为了防止IE6下图片抖动,我们添加了`...

    lightBox 简易的全屏透明遮罩解决方法

    IE6可以通过JavaScript动态调整元素的`top`值来模拟`position:fixed`的效果,但这会导致在滚动时遮罩层抖动,因为每次更新都会重新渲染。为了解决这个问题,我们可以利用IE6的一个特性:当给`html`或`body`标签设置...

    AlertBox 弹出层信息提示框效果实现步骤

    - IE6不支持`position: fixed`,因此需要采用其他技术来模拟类似的效果。 - 原始方法是在`window`的`scroll`事件中实时调整弹出层的位置,但这可能导致页面抖动。 - 一种“离奇”的实现是通过`reflow`,但这同样...

    JS解决position:sticky的兼容性问题的方法

    它是一个CSS定位方法,旨在解决相对定位(relative)和固定定位(fixed)在某些情况下使用上的不便。position:sticky结合了两者的特性:当元素在屏幕内滚动时,它表现为相对定位;而当它即将滚出屏幕时,则变为固定...

    jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

    如果超过,对IE6进行特殊处理(由于IE6不支持`position:fixed`,使用`position:absolute`模拟),其他浏览器则直接设置`position:fixed`,并设置`top`为0,`z-index`为一个较大的值,使其保持在顶部。 4. 当滚动位置...

    jquery简单实现滚动条下拉DIV固定在头部不动

    `是针对IE6的hack,因为IE6不完全支持`position:fixed`,所以用这种方法来模拟固定定位效果,防止元素抖动。 总的来说,这个示例展示了如何利用jQuery和CSS来创建一个响应用户滚动的固定头部效果,这在现代网页设计...

    css expression使用概述及其优缺点介绍

    对于IE6的`position:fixed`兼容性问题,可以通过JavaScript检测并动态更新元素的样式,以避免CSS Expression带来的性能损失和抖动问题。这种方法虽然可能需要更多的代码,但能提供更好的性能和安全性。 总的来说,...

Global site tag (gtag.js) - Google Analytics