Javascript 卷轴上的淡出div

当我的页面滚动时，我正在淡出div#hero图像。目前，下面的代码使用的标称值为1000，以确保缓慢褪色，但我的#hero image div是浏览器高度的100%，因此我希望当用户将100%高度div从初始视口中滚动时，完全不透明度从1转换为0

非常感谢任何帮助

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

---

使用元素的高度，而不是常规的1000值

小提琴：

如果我正确理解了您的评论，在滚动div高度的一半后使淡出完成，只需除以2即可

小提琴：

---

那么，为什么不干脆用

$（“#英雄形象”）.heigth（）替换
1000
？很乐意帮忙！祝你好运最后一件事，我如何调整你的答案以覆盖50%的高度？你做到了：）再次感谢你可能被零除例外可能会发生真实的@johnny5。您可以在设置css dungey的上方添加0检查。如果你的名字是短路参考，我也很喜欢你的名字johnny5。
$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / $('#hero-image').height());
    });
});

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