Get scroll event on a section rather than on body-CodePudding

I have a main section whose height is fixed. When a specific children reach the middle of a section while the main div is fixed, the background image changes.

The issue I'm currently having is that it functions well without any sections like in snippet. Nevertheless, when I include it in a page with the other sections of the page.It don't work.I think that the height on scroll is not being received.

What can I do to make my code works anywhere I embed it? As you can see in the snippet. It is functioning properly.

Page structure:

      <body>
        <Header>
        </Header>
        
        <div>
        Some content here
        </div>
    
        
   //  snippet code base section
        <Section>

        </Section>
  //  snippet code base section
        
       <footer>
      </footer>
    
    </body>

function scrollPictureChange() {
        var main = document.querySelector(".main"),
          sections = main.querySelectorAll(".section"),
          BG = main.querySelector(".BG"),
          el = document.querySelector(".show"),
          cords,
          index = 0,
          h = window.innerHeight,
          lastIndex = null,
          offset = 0;

        applyBG(0);
        window.addEventListener("scroll", function () {
          scrollY = Math.abs(document.body.getClientRects()[0].top);
          index = Math.floor(scrollY / (h - offset));

          if (index != lastIndex) {
            // on index change
            if (lastIndex != null) {
              applyBG(index);
            }
            lastIndex = index;
          }

          el.innerText = `index : ${index} height : ${h} top : ${scrollY}`;
        });

        function applyBG(index) {
          BG.classList.remove("anim");
          setTimeout(function () {
            BG.style.backgroundImage = `url(${sections[index   1].getAttribute(
              "BGurl"
            )})`;
            BG.classList.add("anim");
          }, 300);
        }
      }

        window.onload = scrollPictureChange;
        window.onresize = scrollPictureChange;

.section {
  height: 100vh;
  width: 100%;
  display: flex;
  z-index: 1;
  position: relative;
  background-size: 100% 100% !important;
}

.text {
  margin: auto;
}

.text p {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 149%;
  color: #263244;
}

.text h1 {
  margin-bottom: 20px;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 0px;
  color: #FFFFFF;
  margin-bottom: 50px;
}

.text .story-detail {
  width: 300px;
  border-radius: 20px;
  background: radial-gradient(76.31% 191.89% at 13.43% 22.19%, rgba(226, 228, 231, 0.8) 0%, rgba(228, 228, 229, 0.368) 100%);
  backdrop-filter: blur(10px);
  padding: 23px;
}

.text .story-description {
  width: 321px;
  border-radius: 20px;
  background: radial-gradient(76.31% 191.89% at 13.43% 22.19%, rgba(226, 228, 231, 0.8) 0%, rgba(228, 228, 229, 0.368) 100%);
  backdrop-filter: blur(10px);
  padding: 23px;

}

.BG {
  position: fixed;
  z-index: 0;
  opacity: 1;
  transition: opacity 10s ease-in-out;
  height: 100%;
}

.anim {
  opacity: 1;
}

.show {
  color: orange;
}

   <div >
      <div >
        <div ></div>
      </div>
      <div
        
        BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
      >
        <div >
          <div style="margin-inline: 20px">
            <h1>Our Story</h1>
            <div >
              <p>
                We saw a gap between what people need and what banks offer. It
                means millions of us aren't getting the banking experience we
                deserve for different reasons.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div
        
        BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
      >
        <div >
          <div style="margin-inline: 20px">
            <div >
              <p>
                Traditional banks don’t focus on customers' experience, their
                systems may be slow and outdated, they may prioritize a specific
                group of people, or perhaps they lack the ability to innovate,
                and so on.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div
        
        BGurl="https://i.postimg.cc/cLPLS8xW/mobile-desert.png"
      >
        <div >
          <div style="margin-inline: 20px">
            <div >
              <p>
                So since we're passionate about solving problems and bridging
                gaps, we looked into and identified the challenges and
                capabilities we'll need to build a bank here in the Kingdom.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div
        
        BGurl="https://i.postimg.cc/mZnqV38T/mobile-birds.png"
      >
        <div >
          <div style="margin-inline: 20px">
            <div >
              <p>
                With the best local and international expertise, we began
                building an innovative digital bank designed by and for the
                people. We believe that the most effective way to build a bank
                for people is to do it with them. This is our philosophy. So, we
                started building it with the help of people like you.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div  BGurl="https://i.postimg.cc/k513m0Fb/mountain.png">
        <div >
          <div style="margin-inline: 20px">
            <div >
              <p>
                At D360, innovation starts with someone’s passion for improving
                financial services. To that person, we say: Never stop offering
                solutions to your needs. These solutions will not only benefit
                you, but will significantly impact the lives of millions.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

CodePudding user response：

It will be better if you use Intersection Observer

UPDATE

I think you need intersect ratio to be better, in the example i don't use it, hope it helps you

const bgEl = document.querySelector(".main .BG");

function createObserver(el) {
  let observer;
  let options = {
    root: null,
    rootMargin: "0px"
  };

  function handleIntersect(entries, observer) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const url = entry.target.getAttribute("BGurl");
        bgEl.style.backgroundImage = `url(${url})`;
      }
    });
  }

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(el);
  return observer;
}

(function() {
  const sections = document.querySelectorAll(".main .section");
  const observers = Array.from(sections).map(function(section) {
    createObserver(section);
  });
})();

.section {
  height: 100vh;
  width: 100%;
  display: flex;
  z-index: 1;
  position: relative;
  background-size: 100% 100% !important;
}

.text {
  margin: auto;
}

.text p {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 149%;
  color: #263244;
}

.text h1 {
  margin-bottom: 20px;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 0px;
  color: #FFFFFF;
  margin-bottom: 50px;
}

.text .story-detail {
  width: 300px;
  border-radius: 20px;
  background: radial-gradient(76.31% 191.89% at 13.43% 22.19%, rgba(226, 228, 231, 0.8) 0%, rgba(228, 228, 229, 0.368) 100%);
  backdrop-filter: blur(10px);
  padding: 23px;
}

.text .story-description {
  width: 321px;
  border-radius: 20px;
  background: radial-gradient(76.31% 191.89% at 13.43% 22.19%, rgba(226, 228, 231, 0.8) 0%, rgba(228, 228, 229, 0.368) 100%);
  backdrop-filter: blur(10px);
  padding: 23px;
}

.BG {
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 0;
  opacity: 1;
  transition: opacity 10s ease-in-out;
  height: 100%;
}

<div >
  <div >
  </div>
  <div  BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png">
    <div >
      <div style="margin-inline: 20px">
        <h1>Our Story</h1>
        <div >
          <p>
            We saw a gap between what people need and what banks offer. It means millions of us aren't getting the banking experience we deserve for different reasons.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div  BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png">
    <div >
      <div style="margin-inline: 20px">
        <div >
          <p>
            Traditional banks don’t focus on customers' experience, their systems may be slow and outdated, they may prioritize a specific group of people, or perhaps they lack the ability to innovate, and so on.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div  BGurl="https://i.postimg.cc/cLPLS8xW/mobile-desert.png">
    <div >
      <div style="margin-inline: 20px">
        <div >
          <p>
            So since we're passionate about solving problems and bridging gaps, we looked into and identified the challenges and capabilities we'll need to build a bank here in the Kingdom.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div  BGurl="https://i.postimg.cc/mZnqV38T/mobile-birds.png">
    <div >
      <div style="margin-inline: 20px">
        <div >
          <p>
            With the best local and international expertise, we began building an innovative digital bank designed by and for the people. We believe that the most effective way to build a bank for people is to do it with them. This is our philosophy. So, we started
            building it with the help of people like you.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div  BGurl="https://i.postimg.cc/k513m0Fb/mountain.png">
    <div >
      <div style="margin-inline: 20px">
        <div >
          <p>
            At D360, innovation starts with someone’s passion for improving financial services. To that person, we say: Never stop offering solutions to your needs. These solutions will not only benefit you, but will significantly impact the lives of millions.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>