Javascript IE中的窗口滚动方法闪烁

这对一些人来说可能是一个巨大的惊喜，但是当我使用

$（window.scroll

方法时，IE浏览器出现了问题

我的目标是： 我想让位于左侧的菜单保留其位置，直到滚动达到>y值。然后，它会将自己固定在页面顶部，直到滚动返回到 我的错误： 在Chrome和Firefox中，一切似乎都很好，但当我转到Internet Explorer时，浏览器似乎正在移动#滚动条每次滚动值发生变化时，都会导致移动/闪烁事件

如果有人能给我一个资源或给我一个解决办法，我将非常感谢

这是一把小提琴：

以下是指向dev中站点的链接：

我的剧本：

$(window).scroll(function () {
    var navigation = $(window).scrollTop();
    if (navigation > 400) {
        $('#scroller').css('top',navigation - 220);
    } else {
        $('#scroller').css('top',183);
        $('#scroller').css('position','relative');
    }
});

---

我可以得到闪烁的铬以及如果我滚动非常快。当页面滚动到阈值以下时，使用元素的

fixed

位置，而不是更新滚动的顶部位置。查看更新后的小提琴：

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

。 因此，您仍在收听scroll，但现在您将状态标志保留在scroll处理程序之外，只需评估它是否必须在显示类型之间切换

---

这是如此之多的优化，IE喜欢它。

你可能想看看这个插件，它可以让你这样做，还有更多

如果您想继续使用当前的方法，就像其他答案指出的那样，您应该切换

固定

定位，而不是在每个滚动事件中更新

.top

属性。但是，我还将引入一个标志来跟踪它当前是否被卡住，这样，当它实际进行转换而不是每个滚动事件时，您只更新

位置

和

顶部

属性。与DOM交互在计算上是昂贵的，这将减轻布局引擎的大量负载，并且应该使事情变得更加平滑

$（函数（）{
var=false，
stickAt=$（“#滚动条”）.offset（）.top；
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
如果（！卡住（&scrollTop>stickAt）{
$（'#scroller'）.css（'top'，0）；
$（'#scroller'）.css（'position'，'fixed'）；
卡住=正确；
}否则如果（卡滞和滚动顶部

更新 将

#滚动条

从

相对

切换到

固定

会将其从页面的底部移除，这可能会对布局产生意外的影响，因为它会在不丢失块的情况下重新流动。如果将

#滚动条

更改为使用

位置

，它将从正常流程中删除，并且不再引起这些副作用。我已经更新了上面的示例和链接的JSFIDLE，以反映对JS/CSS的更改

---

我还改变了

stickAt

的计算方式，它用于查找

#scoller

顶部的确切位置，而不是依赖CSS顶部值。

感谢您提供详细的答案！我想知道您是否可以在这行代码stickAt=parseInt（$（'#scroller'）.css（'top'），10）中提供更多的见解；这是否意味着#scroller将粘贴顶部：10px，10%？我问这个问题的原因是因为我注意到，当我实现代码时，在标题上出现了一个小的重叠，并且在滚动时，定位过早地进入。当我试图将该值改为20时，滚动条陷得太深。因此，我的问题是，如果我希望事件触发的位置再向下20像素，我会将该值更改为什么？以下是更新后的站点，其中包含您建议的代码www.squ4reone.com/domains/ottawakaraoke/squ4reone/responsive/index.php。如果您滚动速度稍慢，您可以看到，当切换到固定位置时，它与

parseInt（$（“#scroller'）.css）重叠（'top'），10）

获取

#scroller

的

top

属性，该属性是一个字符串，将其转换为整数。我认为这里发生了一些事情。首先，它很早就被卡住了，因为它上面有一个标题，除了

css（'top'）之外，还提供了一个额外的偏移量

返回。然后，页面主体跳入页眉是从页面的正常流程中删除

#scroller

的结果。使用

$（'#scroller'）.offset（）.top；

而不是

parseInt（$（'#scroller'）.css（'top'），10）

可能会解决第一个问题。要解决第二个问题，您可以使用像waypoints那样的占位符替换

#scroller

，但将

#scroller

设置为

位置：绝对
，而不是
相对
，这样会更好/更容易地从正常流程中完全移除
#d同时解决这两个问题。我正在更新答案。关于
parseInt（$（“#scroller'）.css（'top'），10）；
中的
10
，它是
基数，它告诉
parseInt
，它正在解析的数字是一个十进制数。如果你使用！
$(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;
    }
  });
});