更新

Question

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

我的目标：我想让位于左侧的菜单保持其位置，直到滚动到达＆gt; y值。然后它将自己固定到页面的顶部，直到滚动返回到＆lt; 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');
    }
});

Answer 1

您可能需要查看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，以反映对JS / CSS的更改。

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

Answer 2

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

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

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

Answer 3

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

窗口滚动方法在IE中闪烁

3 个答案:

更新