javascript - 在scrollTop上应用Jquery效果时遇到问题

Question

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

我想做什么？

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

我的问题是什么？

通过使用 jQuery 效果 fadeTo("slow", 1)，我可以使滚动顶部值大于 40 时文本消失。但是，当scrollTop的值小于40时，我无法使其再次消失。

注意:我默认将段落的不透明度设置为0。

这是我在 codePen 上当前代码的链接 http://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/