Javascript 如何创建这种滚动效果？

我在这方面已经有一段时间了，并尝试了不同的方法，例如使用position:sticky和intersectionobserver组合，但我不能完全理解它：（

所以我想问一下，是否有人知道如何实现这种滚动效果？是否可以只使用CSS，或者使用交叉点观察者来实现？如果是，是否有人可以为我指明如何实现的方向？可能是一个库或一个代码笔可以帮上忙？还没有找到任何东西

滚动效果：

---

以下是我的尝试。使用CSS和JavaScript

菜单栏有

位置：固定


电话模块具有
位置：粘性
和
边距顶部：100vh


p元素之间有一个
余量：100vh
。
您可以在脚本中的注释中直接找到有关JavaScript的说明。

我使用了和属性

使用完整页面视图可以更好地查看它！

函数滚动函数（）{
//#content中所有p元素的数组
var p=document.getElementById（'content'）.querySelectorAll（'p'））
//存储这些p元素的偏移位置
var pY=[]
对于（i=0；i普通Firefox、Chrome等浏览器在屏幕上的滚动位置。
var html=document.documentElement
var browsercroll=html.scrollTop
//safariScroll->Safari的滚动位置
var body=document.body；
var safariScroll=html.scrollTop
//获取电话元素
var phone=document.getElementById（'phone'））
//当滚动值大于每个p元素的Y坐标时，为每个p元素写入相应的类
//.color1用于第1段，依此类推。。。
//（减去pY[0]*0.4）在p与手机顶部对齐时发生变化
对于（i=0；ipY[i]-pY[0]*0.4||
safariScroll>pY[i]-pY[0]*0.4）{
phone.classList.add（'color'+（i+1））
phone.classList.remove（'color'+i）
}否则{
phone.classList.remove（'color'+（i+1））
}
}
}
window.onscroll=function（）{scrollFunction（）}
window.onresize=function（）{scrollFunction（）}

正文{
背景：白色；
颜色：#323232；
字体大小：300；
高度：100vh；
保证金：0；
字体系列：Helvetica neue，roboto；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景：白色；
-网络工具包盒阴影：0px-6px 25px 20px rgba（0,0,0,0.44）；
-moz盒阴影：0px-6px 25px 20px rgba（0,0,0,0.44）；
盒影：0px-6px25px20pxRGBA（0,0,0,0.44）；
}
导航ul{
列表样式：无；
显示器：flex；
柔性包装：包装；
}
李国荣{
填充：0 1rem；
}
主要{
显示器：flex；
柔性包装：包装；
对正内容：空间均匀；
}
#内容{
宽度：50%；
}
/*第一段有一个页边空白顶部=屏幕的大小*/
#内容：第一个孩子{
边际上限：100vh；
}
#内容p{
保证金：0；
边缘底部：100vh；
}
/*与第一段相同的页边距顶部+距顶部40%的粘性*/
#电话{
边际上限：100vh；
宽度：8雷姆；
身高：13雷姆；
最大高度：70vh；
位置：粘性；
最高：40%；
背景：浅绿色；
}
#手机颜色1{
背景：紫罗兰属；
}
#手机颜色2{
背景：紫色；
}
#手机颜色3{
背景：皇家蓝；
}
#手机颜色4{
背景：rgb（30150104）；
}


菜单
酒吧
滚动
影响


一只家养的狐狸不断地把你们带到老地方。可能是她在路上遇到的那个些琐碎的笑声。


完成了她的是它的尊贵的图画，也不是美丽的看到共同抛出所有不是爱德华十。特别是一个喧闹起来，他合理地经常。


愿音乐的到来使心爱的人幸运地适应了他。羞怯地提到已婚的儿子，她现在开始了他的生活。玫瑰如往昔。优雅的他优雅的哦，温和的参加了入口的愉悦


我们相信有没有要求不怎么舒适的明显。起来高兴表亲们我们的感觉分钟。

实际上，我使用intersectionObserver和CSS解决了这个问题

const texts = document.querySelectorAll('.text h1');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const entryParentNode = entry.target.parentNode;
      const initialImage = entryParentNode.getAttribute('data-image');
      const images = document.querySelectorAll('.image');
      if (entry.intersectionRatio > 0) {
        entryParentNode.classList.add('show');
        images.forEach((image) => {
          if (image.classList.contains(initialImage)) {
            image.classList.add('show');
          } else {
            image.classList.add('hide');
          }
        })
      } else {
        entryParentNode.classList.toggle('hide');
        images.forEach((image) => {
          if (image.classList.contains(initialImage)) {
            image.classList.remove('show');
          } else {
            image.classList.add('hide');
          }
        })
      }
    });
  });
  texts.forEach((text) => {
    observer.observe(text);
  })

此滚动效果可以使用GSAP和ScrollMagic库来完成。
[滚动效果的示例链接][1]
[源代码的Github链接][2][1]：[2]：@FerinPattel for anchors使用此模板[显示文本到此处]（链接到此处）为什么有三张赞成票？我看不到任何代码，除了乞求其他人做这件事之外，没有其他任何努力。如果你的答案涉及代码，它应该在你的问题中。不是在第三方网站上。我想这是为了问题而不是这个answer@tamarin，他想说的是你应该把你所有的代码你的答案在代码括号中，然后你可以说Fiddle:myfidlelink.com:）你的解决方案很棒@AleksandarĐokić不是真的。这里根本不需要jsFiddle。您可以通过内置的代码片段功能在任何问题或答案中嵌入可运行的示例。好的，谢谢您的建议。我是新来的。删除JSFIDLE并将代码放入我的答案中。