滚动时逐渐淡出图像

时间:2014-08-21 10:52:18

标签: jquery scroll fadein

他们,

我可以使用一些我无法在网上找到的问题的帮助。 我试图淡化标题中的<img>。我希望这个图像在向下滚动时逐渐淡出,当向上滚动时,<img>应逐渐淡入。

我是否必须将滚动事件绑定到img的不透明度?但是如何?

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

这对我有用,可以根据自己的喜好更改数字。

$(window).scroll(function(i){
    var scrollVar = $(window).scrollTop();
    $('.element').css({'top': .7*scrollVar });
    $('.element').css({'opacity':( 100-scrollVar )/100});
})

参考:https://coderwall.com/p/rxfefg

答案 1 :(得分:1)

认为你需要这样的东西,

$(document).scroll(function(){
    var docPos = Math.round(($(window).scrollTop() + $(window).height())/$(document).height() *100);
    $("#img").css("opacity",""+docPos/100+"");
});