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).

リンクされている MDN の Intersection Observer API ページを出発点となるリファレンスとして使用してください。提供されている sticky navbar の例を確認し、提案されている lazy-loading と viewport によってトリガーされるアニメーションのユースケースを検討してください。完了条件は、範囲が定義され、Intersection Observer API の例を含む完全なチュートリアルのトピックが作成されていることです。