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;