Question

这实际上只是一个数学问题，但我无法找到如何做到这一点。我想使用scrollTop慢慢减少对象的opacity。因此，当scrollTop == 1，我希望opacity为1，scrollTop == 2时，我希望opacity为.99，scrollTop == 3， opacity .98。有人可以帮助我做数学吗？非常感谢任何帮助。

Answer 1

如果您想要答案正是您所要求的，那么您可以执行以下操作：

var position = window.pageYOffset;
var opacity = Math.max(0, 1 - (position / 100));

然而，正如其他评论者所建议的那样，在滚动100px后，不透明度会达到0。

Answer 2

＆＃13;

var doc = document.documentElement;

window.onscroll = function() {
var value = window.scrollY / (doc.offsetHeight - doc.clientHeight);
document.getElementById("preview").style.opacity = 1 - value;
}

＆＃13;

body {
  height: 1000px;
}

#container {
  background: linear-gradient(45deg, #eee 25%, transparent 26%, transparent 75%, #eee 76%), linear-gradient(-45deg, #eee 25%, transparent 26%, transparent 75%, #eee 76%);
  background-color: #444;
  background-size: 10px 10px;
  position: fixed;
  width: 100px;
}

#preview {
  height: 100px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="preview"></div>
</div>

＆＃13;

将scrollTop转换为增量值

2 个答案: