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

Sử dụng trang MDN Intersection Observer API được liên kết làm tài liệu tham khảo ban đầu. Xem lại ví dụ sticky navbar được cung cấp và cân nhắc các trường hợp sử dụng lazy-loading và hoạt ảnh được kích hoạt bởi viewport đã đề xuất. Được xem là hoàn thành khi có một chủ đề hướng dẫn đầy đủ với phạm vi được xác định và các ví dụ cho Intersection Observer API.