滚动时更改不透明度

Question

我的目标是在向下滚动时更改 DIV 的不透明度。过渡顺利很重要！

• body的scrollTop为400时，Test-div的不透明度应该为1。
• body的scrollTop为800时，Test-div的不透明度应该为0。

这是我目前拥有的，但它不起作用。

window.addEventListener('scroll', function() {
    if (document.body.scrollTop > 400) {
      var currScrollPos2 = document.body.scrollTop;
      document.getElementById('test').style.opacity = -currScrollPos2 / 400 + 2;
    }
  }
};

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  width: 100%;
}

#test {
  width: 200px;
  height: 200px;
  background-color: red;
  position: fixed;
}

<div id="test"></div>

Answer 1

您很接近，但 body.scrollTop 属性 does not work in all browsers。

我冒昧地清理了您的标记和代码。例如，您在 JavaScript 末尾缺少右括号。你的 CSS 标记中还有一些多余的规则，我删除了。

var test = document.getElementById('test');
window.addEventListener('scroll', function(e) {
  // http://stackoverflow.com/a/28633515/962603
  var scroll = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop || 0;
  test.style.opacity = Math.max(0, Math.min(1, -scroll / 400 + 2));
});

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
}

#test {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: red;
}

<div id="test"></div>

Answer 2

我必须将 document.body.scrollTop 替换为 window.pageYOffset 才能使其正常工作。
见：document.body.scrollTop Firefox returns 0。

window.addEventListener('scroll', function() {
    var currScrollPos2 = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (currScrollPos2 > 400) {
      document.getElementById('test').style.opacity = -currScrollPos2 / 400 + 2;
    }
  }
);

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  width: 100%;
}

#test {
  width: 200px;
  height: 200px;
  background-color: red;
  position: fixed;
}

<div id="test"></div>

Answer 3

只是语法错误。将 '}' 替换为 ')' 在 JS 代码的末尾。 顺便说一句，我建议使用 document.addEventListener 而不是 window.addEventListener

这是正确的代码：https://jsfiddle.net/ye082ae9/

document.addEventListener('scroll', function(e) {
            if (document.body.scrollTop > 400) {
                var currScrollPos2 = document.body.scrollTop;
                document.getElementById('test').style.opacity = -currScrollPos2/400 + 2;
                }
            });

Answer 4

您的代码运行良好，最后有一点拼写错误。只需将 }; 更改为 );

window.addEventListener('scroll', function() {
        if (document.body.scrollTop > 400) {
            var currScrollPos2 = document.body.scrollTop;
            document.getElementById('test').style.opacity = -currScrollPos2/400 + 2;
            }
        }
);