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

Trouble applying Jquery effect on scrollTop

本文关键字：遇到 问题 Jquery scrollTop 应用      更新时间：2023-09-26

我会尽量清楚地解释自己。

我想做什么？

我试图在scrollTop值大于40时使段落的不透明度为

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

我的问题是什么？

当scrollTop值超过40时，我可以使用jQuery效果fadeTo("slow", 1)使文本消失。但是，当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);
    }
});

希望这可以帮助您！

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/

相关文章：