How to do something when window on needed heigth

December 29, 2021

I have some HTML code

<div class="mission" id="mission_block">
            <div class="mission__img">
                <img src="img/phone90.png" alt="">
            </div>
            <div class="mission__text">
                <h1>Our mission and vision</h1>
                <p>While technology is our sweet spot, we’ve developed our vision alongside
                    our customers to ensure your everyday problems are solved through simplistic tools. And as your
                    business grows, we’ll grow right alongside with you. </p>
            </div>
        </div>

I need animate this blocks when window will be on the middle of block mission. How can I create trigger for this?

I already have such JS code:

((window, document) => {
   window.onload = () => {
      const missionBlock = document.getElementById('mission_block');

      const sizes = missionBlock.getBoundingClientRect();

      const {height, top} = sizes
      const scrollTriggerHeigth = top + height / 2

   }
})(window, document, undefined)

>Solution :

You could do this easily with Intersection Observer API.

E.g.

const missionBlock = document.getElementById("mission_block");

let observer = new IntersectionObserver(
  (entries) => {
    // Take the first entry
    const entry = entries[0];

    if (entry.isIntersecting) {
      // do here whatever you need to do
      console.log("instersecting", entry);
      doWhatever();
    }
  },
  { threshold: 0.5 }
);

observer.observe(missionBlock);