Question

我有两个简单的JavaScript代码，可帮助我在HTML文档中执行两项操作：

1）第一名创造一个简单的视差效果

2）当向下滚动时，数字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;

    });
  };

})();

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

1 个答案: