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

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

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

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

滚动淡出div

1 个答案: