滚动淡出div

Question

当我的页面滚动时,我正在淡出div#hero-image.目前,下面的代码使用标称值1000来确保缓慢淡入淡出,但我的#hero-image div是浏览器高度的100%,所以我希望完全不透明度从1转换为0当用户从初始视口滚动100%高度div时.

任何帮助非常感谢!

/* Fade #hero-image on scroll */
$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / 1000);
    });
});

Answer 1

使用元素的高度而不是通用1000值.

小提琴:http://jsfiddle.net/e84enbf2/

$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / $('#hero-image').height());
    });
});

如果我正确地理解了你的评论,那么在滚动一半div的高度后,只需要除以2就可以完成淡出.

小提琴:http://jsfiddle.net/e84enbf2/1/

$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / ($('#hero-image').height() / 2));
    });
});