IE 在滚动时通过普通 JavaScript 向 div 添加类的问题

Question

在浏览器向下滚动一定数量后，我正在使用以下 javascript 向“功能菜单”div 添加“粘性”类。

不久前通过搜索，我从另一个我相信来自 stackoverflow 的用户那里发现了这段代码，但找不到该帖子来引用它。 但我正在寻找一个不使用 jQuery 的示例。

以下在 Firefox、Chrome 和 MS Edge 浏览器中效果很好，但在 IE11 上，该类似乎没有添加到 div 中。

任何人都可以在不使用 jQuery 的情况下建议修复 IE 吗？ 非常感谢！

<script type = "text/javascript" >

myID = document.getElementById("features-menu");

var myScrollFunc = function() {

  var y = window.scrollY;

  if (y >= 400) {
    myID.className = "sticky"
  } else {
    myID.className = ""
  }
};

window.addEventListener("scroll", myScrollFunc);

</script>

Answer 1

如果您查看 Web 控制台，您会看到一条错误消息，告诉您addEventListener不是旧版 IE 上的函数。 不幸的是，如果您觉得 IE11 很有趣，进入（处于）兼容模式，并且没有addEventListener （或其他几个现代功能中的任何一个），那么 IE11 就会步履蹒跚。 例如，如果您的页面位于内部网络上，则默认情况下 IE 将使用兼容模式并像 IE7 一样运行 — 并且会失败，因为 IE7 没有addEventListener 。

您可以对此进行测试并使用attachEvent代替：

if (window.addEventListener) {
    window.addEventListener("scroll", myScrollFunc);
} else {
    window.attachEvent("onscroll", myScrollFunc);
}

（注意“开”。）

这种浏览器的不一致，再加上 DOM 非常冗长和笨拙，这就是我们拥有 jQuery 之类的库的原因。 :-)（不是说你应该使用 jQuery [或任何其他库]，只是说这种事情是它们存在的一个主要原因。）

请注意， attachEvent和addEventListener并不完全相同，但两者都连接事件，并且对于您显示的内容，它们的行为是相同的。 要更彻底地处理差异，请参阅此答案中的hookEvent函数。

Answer 2

问题出在 IE 中未定义的window.scrollY 。 这是另一种方法：

演示

var y = window.scrollY || window.pageYOffset;