Question

当我向下滚动时，我想fadeout我的顶部图像，因此当它滚动页面时它是完全黑色的，当我位于页面顶部时它完全正常。

这是我的JSFiddle。

这部分代码：

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

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

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

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

Answer 1

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

我用这个扩展你的样本：

http://jsfiddle.net/KCb5z/15/

提及：

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

希望这有助于你

Answer 2

你想将它淡化为黑色，所以 - 不，你不能淡化背景图像，但这很容易绕过。我用了一个叠加层。我只是将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());

这是小提琴http://jsfiddle.net/KCb5z/21/

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

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

Answer 3

您必须使用叠加div。这个答案旨在比其他两个更简单，但它们似乎也有效地工作

http://jsfiddle.net/jabark/KCb5z/20/

JS：

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'));        
});

HTML：

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

CSS：

#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;
}

滚动时将div淡化为黑色

3 个答案: