无法在 scrollTop 上应用 Jquery 效果答案

【问题标题】：Trouble applying Jquery effect on scrollTop无法在 scrollTop 上应用 Jquery 效果
【发布时间】：2016-04-28 16:59:13
【问题描述】：

我会尽量解释清楚。

我想做什么？

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

我的问题是什么？

我可以通过使用jQuery效果fadeTo("slow", 1)使scrollTop值大于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);
    }
});

【问题讨论】：

标签： javascript jquery html css

【解决方案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/

【讨论】：