javascript - 窗口滚动方法在 IE 中闪烁

这对某些人来说可能是一个巨大的惊喜，但是当我使用 $(window).scroll 方法时，我遇到了 IE 浏览器的问题。我的目标:我想让位于左侧的菜单保持它的位置，直到滚动达到 > y 值。然后它将自己固定在页面顶部，直到滚动返回到 我的错误:在 Chrome 和 Firefox 中一切似乎都很好，但是当我转到 Internet Explorer 时，每次滚动值更改时浏览器似乎都在移动 #scroller，这会导致移动/闪烁事件。如果有人能指出我的资源或给我一个解决方法，我将不胜感激!这是一个 fiddle : http://jsfiddle.net/CampbeII/nLK7j/这是一个指向开发站点的链接: http://squ4reone.com/domains/ottawakaraoke/Squ4reone/responsive/index.php我的脚本:$(window).scroll(function () { var navigation = $(window).scrollTop(); if (navigation > 400) { $('#scroller').css('top',navigation - 220); } else { $('#scroller').css('top',183); $('#scroller').css('position','relative'); }}); 最佳答案 你可能想看看 jQuery Waypoints 插件，它可以让你像这样做 sticky elements 等等。如果您想坚持使用当前的方法，就像其他答案表明的那样，您应该切换 fixed 定位，而不是在每个滚动事件中更新 .top 属性。但是，我还将引入一个标志来跟踪它当前是否被卡住，这样您只会在实际进行转换而不是每个滚动事件时更新 position 和 top 属性。与 DOM 交互的计算成本很高，这将减轻布局引擎的大量负载，并使事情变得更加顺畅。 http://jsfiddle.net/WYNcj/6/$(function () { var stuck = false, stickAt = $('#scroller').offset().top; $(window).scroll(function () { var scrollTop = $(window).scrollTop(); if (!stuck && scrollTop > stickAt) { $('#scroller').css('top', 0); $('#scroller').css('position','fixed'); stuck = true; } else if (stuck && scrollTop < stickAt) { $('#scroller').css('top', stickAt); $('#scroller').css('position','absolute'); stuck = false; } });});更新将 #scroller 从 relative 切换到 fixed 会将其从页面的 normal flow 中删除，这可能会对布局产生意想不到的后果，因为它在没有丢失块的情况下重新流动。如果您将 #scroller 更改为使用 absolute position，它将从正常流程中删除并且不再导致这些副作用。我已经更新了上面的示例和链接的 jsfiddle 以反射(reflect)对 JS/CSS 的更改。我还改变了 stickAt 的计算方式，它使用 .offset() 来查找 #scoller 顶部的确切位置，而不是依赖于 CSS 顶部值。关于javascript - 窗口滚动方法在 IE 中闪烁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15797611/