Question

我正在使用以下javascript在向浏览器输入一定金额后向“features-menu”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上的功能。不幸的是，如果你看到它很有趣，进入（在）兼容模式，而不是addEventListener（或任何其他几个现代功能），IE11将会蹒跚而行。例如，如果您的页面位于内部网络上，默认情况下IE将使用兼容模式并像IE7一样运行 - 并且因为IE7没有addEventListener而失败。

您可以对其进行测试并改为使用attachEvent：

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

（注意“on”。）

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

请注意，attachEvent和addEventListener并不完全相同，但无论是连接事件还是已显示的内容，它们的行为都相同。要更全面地处理差异，请参阅this answer中的hookEvent功能。

Answer 2

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

Demo

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

IE上滚动

2 个答案: