Question

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

当正文的scrollTop为400时，Test-div的不透明度应为1.
当身体的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

我必须将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 2

语法错误。在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 3

你的代码工作正常，最后有一点拼写错误。只需将}; 更改为）;

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

Answer 4

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

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

＆＃13;

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));
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
}

#test {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: red;
}

＆＃13;

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

＆＃13;

滚动

4 个答案: