在scrollTop上应用Jquery效果时出现问题

Question

我会尽可能清楚地解释我自己。

我想做什么？

我试图在scrollTop值大于40时将段落的不透明度设置为1，在scrollTop值小于40时再次将段落的不透明度设置为0。（因此，基本上当用户向下滚动文本时，文本就会出现，当他们再次向上滚动文本时，文本就会消失）；

我有什么问题？

当scrollTop值大于40时，我可以使用jQuery效果fadeTo（“slow”，1）使文本消失。但是，当scrollTop的值小于40时，我不能让它再次消失。

注意：默认情况下，我将段落的不透明度设置为0。

这里是一个链接到我目前的代码在codePenhttp://codepen.io/kevin1616/pen/reLgQZ

$(window).scroll(function() {
    var scrollPosition = $(this).scrollTop();
    console.log(scrollPosition);
    if (scrollPosition > 40) {
        // apply effects and animations
        $('p').fadeTo("slow",1);
    } else if(scrollPosition < 40){
        // apply effects and animations
        $('p').fadeTo("slow",0);
    }
});

Answer 1

希望这能帮到你！

if (scrollPosition > 40) {
    $('p').fadeIn("slow",1);
} else if(scrollPosition < 40){
    $('p').fadeOut("slow",0);
}

我相信有一个更好的解决方案使用切换。

http://api.jquery.com/fadein/

http://api.jquery.com/fadetoggle/