窗口滚动方法在IE中闪烁

时间:2013-04-03 20:37:24

标签: javascript jquery internet-explorer scroll

这对某些人来说可能是一个巨大的惊喜,但是当我使用$(window).scroll方法时,我遇到了IE浏览器的问题。

我的目标: 我想让位于左侧的菜单保持其位置,直到滚动到达> y值。然后它将自己固定到页面的顶部,直到滚动返回到< y值。

我的错误: 在Chrome和Firefox中,一切似乎都很好但是当我转到Internet Explorer时,每次滚动值改变时,浏览器似乎都会移动#scroller,这会导致移动/闪烁事件。

如果有人能指出我的资源或给我一个解决方法,我将非常感激!

这是一个小提琴: http://jsfiddle.net/CampbeII/nLK7j/

以下是dev中网站的链接: 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');
    }
});

3 个答案:

答案 0 :(得分:2)

您可能需要查看jQuery Waypoints插件,它可以让您sticky elements这样做以及更多。

如果你想坚持使用当前的方法,就像其他答案表明你应该切换fixed定位,而不是在每个滚动事件中更新.top属性。但是,我还会引入一个标记来跟踪它当前是否卡住,这样您只是在实际进行转换而不是每个滚动事件时更新positiontop属性。与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;
    }
  });
});

更新

#scrollerrelative切换为fixed会将其从页面的normal flow中删除,这会对布局产生意外后果,因为它会重新流动而不会丢失块。如果您更改#scroller以使用absolute position,则会从正常流程中删除它,并且不会再导致这些副作用。我已经更新了上面的示例和链接的jsfiddle,以反映对JS / CSS的更改。

我也改变了计算stickAt的方式,它使用.offset()来查找#scoller顶部的确切位置,而不是依赖于CSS顶部值。< / p>

答案 1 :(得分:1)

请不要在每个滚动事件中设置最高距离,而是只考虑在固定位置和绝对或相对位置之间切换。所有浏览器都会欣赏,尤其是IE。

所以你仍然会听滚动,但是你现在将状态标志保留在滚动处理程序之外,并简单地评估它是否必须在显示类型之间切换。

这是非常优化的,IE喜欢它。

答案 2 :(得分:0)

如果我滚动得非常快,我也可以在Chrome中闪烁。一旦页面滚动到阈值以下,而不是更新滚动的顶部位置,而是使用fixed位置作为元素。看看更新的小提琴:http://jsfiddle.net/nLK7j/2/