jquery用页面滚动淡出div

我正试图在页面向下滚动时淡出div（使用页面滚动 – 而不仅仅是fadeOut效果）。 我正在调整div的不透明度，因为页面在这里使用这段代码向下滚动：

$(window).scroll(function() { var scroll = $(window).scrollTop(); $('.logo_container').css({'opacity':( 100-scroll )/100}); }); 

我的问题是，对我来说，它消失得太快，我想在用户滚动时更加微妙的淡入淡出。 任何人都可以想出一个更好的逻辑来做出更慢，更微妙的淡出。

这是一个显示我的代码的JSFIDDLE

Answer 1

这个FIDDLE使用非常简单的逻辑可以正常工作。 使用这段jquery使其工作：

 $(window).scroll(function () { var scrollTop = $(window).scrollTop(); var height = $(window).height(); $('.logo_container, .slogan').css({ 'opacity': ((height - scrollTop) / height) }); }); 

（height – scrollTop）/ height给出的值设置为1到0的线性forms。

例：

height = 430px，scrollTop = 233px。

（高度 – scrollTop）/高度将给出不透明度0.45。

Answer 2

解决方案A.

jQuery动画

 $(window).scroll(function() { var scroll = $(window).scrollTop(); $('.logo_container, .slogan').stop().animate( {opacity: (( 180-scroll )/100)+0.1}, "slow" ); }); 

解决方案B.

CSS过渡

 .wrapper { height:1000px } .logo_container { background:red; width:250px; height:500px; position:relative; margin:0px auto; transition: opacity 1s ease; } 

Answer 3

通过更改该部分( 1000-scroll )/1000改进了解决方案

的jsfiddle

希望能帮助到你