javascript - 当元素向上滚动到页面顶部时，我想将元素的不透明度从 0 更改为 1

Question

我在我的页面上使用 twitter-bootstrap 并且我有一个视频背景。看起来像这样https://jsfiddle.net/Leytgm3L/41/ .当用户向下滚动时，黑色部分开始出现，首先它的不透明度设置为 0，但是当用户继续滚动时 - 当他到达该部分的末尾时它变为 1。我想更改它，因此当该部分完全显示在屏幕上时，该部分会将不透明度设置为 1，这样当该组件在页面上完全可见时，用户将看到该组件的黑色背景。 所以这不好:http://i.imgur.com/dBtLqpq.png ，但像这样的是:http://imgur.com/a/elZv5 我试着去:

$("#black").css("opacity",$("body").scrollTop()/1000);

但是没有用。你能帮我吗？

Answer 1

下面是一些代码，当用户向下滚动时改变不透明度，从文档顶部的不透明度 0 开始，当他们到达元素时变为不透明度 1:

$("#black").css("opacity",1 -($("#black").offset().top - $("body").scrollTop()) / $("#black").offset().top);

它的工作原理是将黑色元素在页面上的位置与当前滚动值进行比较。为了提高性能，您可以缓存 jQuery 选择器和对 .offset 的调用。

---

JSFiddle:http://jsfiddle.net/Leytgm3L/45/