Javascript 滚动文本以更改滚动上的固定背景图像

我正在寻找一些帮助，我正在尝试重新创建这个网站的主页

我不想使用Jquery，无论是纯JS还是Vue

我想让它做什么就做什么，但有一些问题

HTML

JS

var doc=window.document，
context=doc.querySelector（“.js循环”），
clones=context.querySelectorAll（“.is clone”），
disableScroll=false，
滚动高度=0，
scrollPos=0，
克隆高度=0，
i=0；
函数getScrollPos（）{
返回（context.pageYOffset | | | context.scrollTop）-（context.clientTop | | 0）；
}
功能设置CROLLPOS（pos）{
context.scrollTop=pos；
}
函数getClonesHeight（）{
克隆高度=0；
对于（i=0；i<0.length；i+=1）{
clonesHeight=clonesHeight+clones[i]。视线外；
}
返回克隆高度；
}
函数reCalc（）{
scrollPos=getScrollPos（）；
scrollHeight=context.scrollHeight；
clonesHeight=getClonesHeight（）；
如果（滚动位置=滚动高度）{
//到达底部后滚动到顶部
setScrollPos（1）；//向下滚动1个像素以允许向上滚动
disableScroll=true；
}否则，如果（滚动位置{
entries.forEach（entry=>{
如果（entry.intersectionRatio>0）{
entry.target.classList.add（'active'）；
}否则{
entry.target.classList.remove（'active'）；
}
});
});
images.forEach（image=>{
观察者，观察者（图像）；
});
const header=document.getElementById（“父项”）；
const sectionOne=document.querySelector（“h1.step1”）；
const section2=document.querySelector（“h1.step2”）；
const section3=document.querySelector（“h1.step3”）；
const SectionOne Observer=新的IntersectionObserver（函数(
条目，
第一节观察员
) {
entries.forEach（entry=>{
如果（！entry.isIntersecting）{
header.classList.add（“mystyle”）；
}否则{
header.classList.remove（“mystyle”）；
}
});
});
第一节观察者。观察（第一节）；
const sectionTwoObserver=新的IntersectionObserver（函数(
条目，
第二节观察员
) {
entries.forEach（entry=>{
如果（！entry.isIntersecting）{
header.classList.add（“mystyle1”）；
}否则{
header.classList.remove（“mystyle1”）；
}
});
});
第二节观察者。观察（第二节）；
const Section ThreeObserver=新的IntersectionObserver（函数(
条目，
第三节观察员
) {
entries.forEach（entry=>{
如果（！entry.isIntersecting）{
header.classList.add（“mystyle2”）；
}否则{
header.classList.remove（“mystyle2”）；
}
});
});
第三节观察者。观察（第三节）；
//if（document.querySelectorAll（'h1.step1.active'））{
//document.getElementById（“父”）.classList.toggle（“mystyle”）；
//}其他{
//document.getElementById（“父”）.classList.remove（“mystyle”）；
// }
//if（document.classList.contains（“h1.step1.active”））{
//document.getElementById（“父”）.classList.add（“mystyle”）；
//}其他{
//document.getElementById（“父”）.classList.remove（“mystyle”）；
// }

我必须为我需要的每个图像复制IntersectionObserver，有没有更干净的方法

在某些点上，有两个活动状态，因此它不显示任何图像，只显示背景色

什么是最好的方式来淡出图像的变化，如示例网站

是否有任何示例或脚本可以完成我正在尝试做的事情

谢谢

    <main id="parent" class="Loop js-loop">
  <section>
    <h1 class="step1">One</h1>
  </section>
  <section>
    <h1 class="step2">For</h1>
  </section>
  <section>
    <h1 class="step3">All</h1>
  </section>
  <section>
    <h1>And</h1>
  </section>
  <section>
    <h1>All</h1>
  </section>
  <section>
    <h1>For</h1>
  </section>

  <!--
  These blocks are the same as the first blocks to get that looping illusion going.
  You need to add clones to fill out a full viewport height.
  -->
  <section class="green is-clone">
    <h1>One</h1>
  </section>
  <section class="red is-clone">
    <h1>For</h1>
  </section>
</main>

    html,
body {
  height: 100%;
  overflow: hidden;
}

.Loop {
  position: relative;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

section {
  position: relative;
  text-align: center;
/*   min-height: 300px;
  max-height: 700px; */
  height: 100vh;
}

::scrollbar {
  display: none;
}

body {
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 80px;
  letter-spacing: 5px;
/*   color: #fff; */
  text-transform: uppercase;
}

.mystyle {
  background: red;
}


.mystyle1 {
    background-image: url(https://images.unsplash.com/photo-1528834379234-2de7f8328fd8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=10);
}

.mystyle2 {
  background-image: url(https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80);
}

    var doc = window.document,
  context = doc.querySelector(".js-loop"),
  clones = context.querySelectorAll(".is-clone"),
  disableScroll = false,
  scrollHeight = 0,
  scrollPos = 0,
  clonesHeight = 0,
  i = 0;

function getScrollPos() {
  return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}

function setScrollPos(pos) {
  context.scrollTop = pos;
}

function getClonesHeight() {
  clonesHeight = 0;

  for (i = 0; i < clones.length; i += 1) {
    clonesHeight = clonesHeight + clones[i].offsetHeight;
  }

  return clonesHeight;
}

function reCalc() {
  scrollPos = getScrollPos();
  scrollHeight = context.scrollHeight;
  clonesHeight = getClonesHeight();

  if (scrollPos <= 0) {
    setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
  }
}

function scrollUpdate() {
  if (!disableScroll) {
    scrollPos = getScrollPos();

    if (clonesHeight + scrollPos >= scrollHeight) {
      // Scroll to the top when you’ve reached the bottom
      setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
      disableScroll = true;
    } else if (scrollPos <= 0) {
      // Scroll to the bottom when you reach the top
      setScrollPos(scrollHeight - clonesHeight);
      disableScroll = true;
    }
  }

  if (disableScroll) {
    // Disable scroll-jumping for a short time to avoid flickering
    window.setTimeout(function() {
      disableScroll = false;
    }, 40);
  }
}

function init() {
  reCalc();

  context.addEventListener(
    "scroll",
    function() {
      window.requestAnimationFrame(scrollUpdate);
    },
    false
  );

  window.addEventListener(
    "resize",
    function() {
      window.requestAnimationFrame(reCalc);
    },
    false
  );
}

if (document.readyState !== "loading") {
  init();
} else {
  doc.addEventListener("DOMContentLoaded", init, false);
}

// Just for this demo: Center the middle block on page load
window.onload = function() {
  setScrollPos(
    Math.round(
      clones[0].getBoundingClientRect().top +
        getScrollPos() -
        (context.offsetHeight - clones[0].offsetHeight) / 2
    )
  );
};





const images = document.querySelectorAll('h1');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('active');
    } else {
      entry.target.classList.remove('active');
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

const header = document.getElementById("parent");
const sectionOne = document.querySelector("h1.step1");
const sectionTwo = document.querySelector("h1.step2");
const sectionThree = document.querySelector("h1.step3");

const sectionOneObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("mystyle");
    } else {
      header.classList.remove("mystyle");
    }
  });
});

sectionOneObserver.observe(sectionOne);

const sectionTwoObserver = new IntersectionObserver(function(
  entries,
  sectionTwoObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("mystyle1");
    } else {
      header.classList.remove("mystyle1");
    }
  });
});

sectionTwoObserver.observe(sectionTwo);

const sectionThreeObserver = new IntersectionObserver(function(
  entries,
  sectionThreeObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("mystyle2");
    } else {
      header.classList.remove("mystyle2");
    }
  });
});

sectionThreeObserver.observe(sectionThree);






// if (document.querySelectorAll('h1.step1.active')){
//   document.getElementById("parent").classList.toggle("mystyle");
//   } else {
//     document.getElementById("parent").classList.remove("mystyle");
// }


// if (document.classList.contains("h1.step1.active")) {
//     document.getElementById("parent").classList.add("mystyle");
// } else {
//     document.getElementById("parent").classList.remove("mystyle");
// }