Javascript 滚动显示/消失文本

我正试图使文本在页面滚动上显示/消失，就像在标题“创建定制的支付体验”下一样，请任何人帮助我如何实现滚动效果，我将非常感谢。

此网站上的效果称为基于滚动的动画。他们在这个网站上使用不同类型的滚动动画，但是你所询问的部分的效果实现了滚动固定和滚动触发动画的组合

这可以通过几个不同的库或从头开始实现。下面是我写的一篇文章，可能有助于澄清创建基于滚动的动画的一般方法

因为这个网站有很多复杂和协调的滚动动画，他们可能正在使用滚动动画库，比如ScrollMagic或GSAP ScrollTrigger。您可以调查这些，以了解如何创建此效果

您还可以使用

position:sticky

（CSS）组合从头开始创建滚动文本效果，以使文本保持在同一位置，并使用交叉点观察者（JavaScript）滚动触发动画

我创建了这个效果的演示，您可以在这里查看：

解决方案（JS、CSS、HTML）

$（窗口）.on（“加载”，函数（）{
$（窗口）。滚动（函数（）{
var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）；
$（“.fade”）。每个（函数（）{
/*检查每个所需元件的位置*/
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
/*如果元素完全在窗口边界内，则淡入*/
如果（objectBottom
.fade{
利润率：50像素；
填充：50px；
背景颜色：浅绿色；
不透明度：1；
}

淡入01
淡入02
淡入03
淡入04
淡入05
淡入06
淡入07
淡入08
淡入09
淡入10
调查intersectionObserver，它可能会有所帮助。