javascript - 在滚动条上将 div 淡化为黑色

Question

我想在向下滚动时淡出我的顶部图像，这样当它滚出页面时它是完全黑色的，而当我在页面顶部时它完全正常。

这是我的 JSFiddle .

这一段代码:

<div class="jumbo midheight">
   test<br />test
</div>

我的背景颜色为黑色，所以我认为只淡出 我的背景图像元素会很聪明，但似乎这是不可能的。

这是否意味着我必须在 div 本身上放置一个叠加层？
如果是这样，我该怎么做？

理想情况下，我想避免在顶部添加叠加层 div，但我认为我可能不得不这样做。

Answer 1

您想将其淡化为黑色，所以 - 不，您不能使背景图像淡化，但这很容易解决。我使用了覆盖。我只是将 div 与背景图像相对定位。将另一个 div 放入其中，并将其称为黑色覆盖以及一些添加的 css 和 js。 CSS:

#blackOverlay{background-color:#000;opacity:0.0;position:absolute;top:0;width:100%;height:100%;}

JS:

  $('#blackOverlay').css('opacity',currentScrollTop/$('#blackOverlay').height());

这是 fiddle http://jsfiddle.net/KCb5z/21/

为了简单起见，我去掉了你的 js，但你可以看到我在那里的目的。这应该让你开始。

• edit 刚看到你说你不想使用叠加层，但为什么不呢？简单的解决方案。