The problem with this parallax is that it runs on all sections of the .parallaxBg class page at the same time. Therefore, I would like to use the Intersection Observer to run parallax only when the section enters the viewport.

// Parallax -------------------------------------------------------------------------

window.addEventListener("scroll", function parallaxFunction() {
    let bg = document.querySelectorAll(".parallaxBg");

    let distance = window.pageYOffset;
    bg.forEach(parallaxBg => {
        parallaxBg.style.top = distance * -0.2 + "px";
    })
});

// Intersection observer --------------------------------------------------------------

const bgImages = document.querySelectorAll('.parallaxBg');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entries);
    
    if (entry.intersectionRatio > 0) {
        entry.target.parallaxFunction;
    } else {
        entry.target.parallaxFunction;
      }

  });
});

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