4

这对某些人来说可能是一个巨大的惊喜，但是当我使用该$(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');
    }
});
4

3 回答 3

2

你可能想看看jQuery Waypoints插件，它可以让你做像这样的粘性元素等等。

如果您想坚持当前的方法，就像其他答案所表明的那样，您应该切换fixed定位而不是.top在每个滚动事件中更新属性。但是，我还会引入一个标志来跟踪它当前是否被卡住，这样你只会在它实际进行转换而不是每个滚动事件时更新positionandtop属性。与 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将from切换relative为fixed将其从页面的正常流程中删除，这可能会对布局产生意想不到的后果，因为它会在没有丢失块的情况下重新流动。如果您更改#scroller为使用 an ，它将从正常流程中删除，并且不会再导致这些副作用。我已经更新了上面的示例和链接的 jsfiddle 以反映对 JS/CSS 的更改。absolute position

我还更改了stickAt计算方式，它用于.offset()查找顶部的确切位置，#scoller而不是依赖于 CSS 顶部值。

于 2013-04-03T22:19:44.400 回答
1

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

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

那是更加优化和 IE 喜欢它。

于 2013-04-03T20:51:08.167 回答
0

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

于 2013-04-03T20:50:08.990 回答