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。你正在切换类(class)。前者是一种不好的做法，而后者则很常见。

现在，您会看到，如果将 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;

    });
  };

})();