JavaScript 冲突视差和滚动时更改 ID

Question

我有两个简单的JavaScript代码，可以帮助我在HTML文档上做两件事：

1(数字一创建简单的视差效果

2(第二个在向下滚动时更改HTML元素的ID

每个 JavaScript 代码单独工作得很好，但不能一起工作。

这是视差代码：

(function(){
  var parallax = document.querySelectorAll(".parallax"),
      speed = 0.5;
  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){
      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "0 " + (windowYOffset * speed) + "px";
      el.style.backgroundPosition = elBackgrounPos;
    });
  };
})();

这是不断变化的ID代码：

window.onscroll = function() {
    console.log(window.pageYOffset);
    var nav = document.getElementById('regMenu');
    if ( window.pageYOffset > 100 ) {
        nav.classList.add("fixMenu");
    } else {
        nav.classList.remove("fixMenu");
    }
}

我已经尝试过改变位置，例如向下移动一个并向上移动另一个位置，但保持在顶部的那个总是获胜，而另一个，下面的那个，停止工作。

谁能帮我使两者正常工作？

Answer 1

您不会更改 ID。您正在切换类。前者是一种不好的做法，而后者很常见。

现在，你看，如果你在全局范围内将window.onscroll定义为一个函数，并在某个地方重新声明它，它的行为将变得不可预测。在这种情况下，我猜 IIFE 似乎赢了。

无论如何，你期望window.onscroll的行为像一个事件，你可以把两个听众归咎于它。但事实并非如此，因此较短的路径是仅声明一个函数来执行这两个操作：

(function(){
  var parallax = document.querySelectorAll(".parallax"),
      speed = 0.5;
  window.onscroll = function(){
    var nav = document.getElementById('regMenu');
    if ( window.pageYOffset > 100 ) {
        nav.classList.add("fixMenu");
    } else {
        nav.classList.remove("fixMenu");
    }
    [].slice.call(parallax).forEach(function(el,i){
      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "0 " + (windowYOffset * speed) + "px";
      el.style.backgroundPosition = elBackgrounPos;
    });
  };
})();