在滚动上将div渐变为黑色

Question

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

这是我的JSFiddle。

这段代码:

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

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

这是否意味着我必须把一个覆盖到div本身?
如果有，我该怎么做呢?

理想情况下，我想避免在顶部添加覆盖div，但我认为我可能不得不。

Answer 1

你想把它淡入黑色，所以-不，你不能淡入背景图像，但这很容易做到。我使用了叠加。我只是定位与背景图像相对的div。在里面添加另一个div，命名为black overlay，并添加一些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 2

Archer说的是对的。滚动淡出的逻辑非常简单。只需根据当前scrolltop值计算alpha值。

我对你的样品做了如下扩展:

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

提到:

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

希望这对你有帮助

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