gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:02:45 25 4
gpt4 key购买 nike

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

这是我的 JSFiddle .

这一段代码:

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

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

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

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

最佳答案

您想将其淡化为黑色,所以 - 不,您不能使背景图像淡化,但这很容易解决。我使用了覆盖。我只是将 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 刚看到你说你不想使用叠加层,但为什么不呢?简单的解决方案。

关于javascript - 在滚动条上将 div 淡化为黑色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23625906/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com