滚动时淡出 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));
    });
});