javascript - 使用 jquery 更改基于滚动的淡出 div

Question

这是我的代码:http://jsfiddle.net/spadez/Fq5K4/

我想让它在用户向下滚动页面时，顶部的图像变黑，我向下滚动得越多，整个 block 就完全变黑了。这种技术可以在这里看到:

http://www.metalabdesign.com/work/

我能找到的最接近的代码是这样的:http://jsfiddle.net/HsRpT/6/ :

$(window).scroll(function() {
    var el = $('.block');    
    var offset = el.offset();  
    var opacity = ( (offset.top - el.height() ) / 100 ) * -1;
    $('.block').css('opacity', opacity );
});

Answer 1

你会这样做:

$(window).on('scroll', function() {
    $('.block').css('opacity', function() {
        return 1 - ($(window).scrollTop() / $(this).outerHeight());
    });
});

FIDDLE

ANOTHER FIDDLE