Javascript 卷轴上的淡入淡入黑色

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

这是我的

本节代码：

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

试验
试验

我的背景颜色是黑色的，所以我想只淡出我的背景图像元素是明智的，但这似乎是不可能的

这是否意味着我必须在

div

本身上添加一个覆盖？
如果是，我该怎么做

---

理想情况下，我希望避免在顶部添加覆盖层

div

，但我认为我可能不得不这样做。

阿切尔说的是正确的。滚动到淡出的逻辑相当简单。只需根据当前的scrolltop值计算alpha值

我用以下内容扩展了您的示例：

提及：

...
var currentJumboAlpha = Math.max(1 - ((currentScrollTop * 100 / jumboHeight) / 100), 0);
...

---

希望这能帮助你

你想把它淡入黑色，所以-不，你不能淡入背景图像，但这很容易。我用了一个覆盖层。我只是定位了与背景图像相对的div。将另一个div放入其中，并将其命名为black overlay以及一些添加的css和js。 CSS:

JS:

这是小提琴

为了简单起见，我拿出了你的js，但你可以看到我的用意。这应该让你开始

• 编辑刚才看到你说你不想使用覆盖，但为什么不呢？简单的解决方案

---

您必须使用覆盖div。这个答案旨在比其他两个简单，但它们似乎也很有效

JS:

HTML:

---

你不能使背景图像褪色，只能使整个元素褪色。您将需要一个单独的元素（img或带有背景图像的div）并将其淡入淡出。查看

$（窗口）。在（“滚动”）上，只需要一行代码，这是如何更有效的？请告诉我答案中我说我的效率更高的部分？嗯，你编辑了它，但它肯定也不简单。并不是说它有什么问题，我只是想知道30行代码比html css和js总共3行代码要简单多少，这使得它工作起来。如果我编辑过它，它会说我编辑过它。就像你说的“18分钟前编辑”一样，我的不是。更简单的是，它可以处理很多情况。你可以拿我的，把它放在任何地方，指向任何元素，它应该能正常工作。在写我的答案的时候，如果：1）容器的高度不是600px 2）容器不在页面的顶部请参见编辑，因为您使用了我的css，您的css也只能用于400px的容器。当然，如果元素不在顶部，您的元素会更好，而不是更简单。不过这是一个很好的补充+1这确实有帮助，谢谢。如果我将jumbo背景色设置为黑色，然后将图像放入图像标签中，然后将其淡出，会怎么样？
#blackOverlay{background-color:#000;opacity:0.0;position:absolute;top:0;width:100%;height:100%;}

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

function CheckScroll(el) {
    var topVal = el.outerHeight(true);
    var bottom_of_object = el.offset().top + topVal;
    var top_of_window = $(window).scrollTop();
    var amountOff = bottom_of_object - top_of_window;
    var opacity = amountOff / topVal;
    el.find('#FadeMe').css('opacity',opacity);
}

$(window).scroll(function(){
    CheckScroll($('.jumbo'));        
});

<div class="jumbo midheight">
    <div id="FadeMe"> </div>
</div>

#FadeMe {
    position:absolute;
    top:0;
    left:0;
    height:400px;
    width:100%;
    background-image: url("http://www.vlime.co.nz/images/buttons/backgroundimage.jpg");
    background-attachment: fixed;
}
.jumbo {
    background: black;
    position:relative;
}