Question

所以我真的很想在HTML中使用javascript和jquery，所以这可能是一个非常基本的问题，但我真的很挣扎。

我有一个带有标题的HTML文档，当你开始向下滚动时，我希望它逐渐消失。我目前的代码看起来有点像这样：

<dispatcher>REQUEST</dispatcher> <dispatcher>ASYNC</dispatcher>

我知道代码的第一部分是有效的，因为我已经为它设置了像“0.5”和“0.75”这样的数值，并且它工作正常但是只要我添加我的janky公式它就会停止工作。

有什么想法吗？谢谢！

Answer 1

问题：

document.scrollTop将返回undefined，因为scrollTop是元素属性。

document不是一个元素，而是一个可以通过它访问它们的接口。

_{（文档元素将是document.documentElement，但在这种情况下这不起作用，因为它引用了<html>元素。此元素不会滚动，因此它scrollTop值永远不会改变。）}

解决方案：

滚动的实际元素是<body>，因此您应该在计算中引用它。

尝试将document.scrollTop替换为document.body.scrollTop，如下面的工作示例所示。

document.addEventListener("scroll", function() {
  document.getElementById("myTitle").style.opacity = (75 - document.body.scrollTop) / 75;
});

body {
  height: 1000px;
}

#myTitle {
  padding: 100px;
  background-color: red;
  color: white;
}

<div id="myTitle">
  THIS SHOULD FADE OUT
</div>

Answer 2

如果您使用的是jQuery：

Math.ceil()

请注意，减去的空格非常重要！

Answer 3

每次用户滚动时，您都需要更新不透明度值。仅设置一次不透明度值不会在滚动时更新它。您可以使用scroll事件，每次用户滚动时，都会根据当前window.scrollY值设置您的不透明度值（当用户滚动时，该值会明显改变）。

了解events，它们非常有用。