Intersection Observer API

Hey!

Would be nice to see a topic about the Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

I used it one time, where I made a navbar sticky, whenever the user scrolling down and the hero section is no longer in the viewport. Example:

function stickyHeaderHandling() {
  const sectionHero = document.getElementById("hero-section");
  const navHeader = document.getElementById("nav-header");

  const stickyNav = function (entries) {
    const [entry] = entries;

    if (!entry.isIntersecting) {
      navHeader.classList.add("sticky--header");
    } else {
      navHeader.classList.remove("sticky--header");
    }
  };

  const heroObserver = new IntersectionObserver(stickyNav, {
    root: null,
    threshold: 0.1,
  });

  heroObserver.observe(sectionHero);
}

Also you can use it for lazy loading images, or animate html elements whenever the elements get into the viewport(https://www.itzami.com/blog/boost-your-css-animations-with-intersection-observer-api).

Use the linked MDN Intersection Observer API page as the starting reference. Review the supplied sticky navbar example and consider the suggested lazy-loading and viewport-triggered animation use cases. Done means a complete tutorial topic with a defined scope and examples for the Intersection Observer API.