JAVASCRIPT

intersection observer api

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);
// A threshold of 1.0 means that when 100% of the target is 
// visible within the element specified by the root option,
// the callback is invoked.

intersection observer API

//first we need to create new intersection observer
//we pass there callback function and object of options
//callback function will get called every time observed (target) element 
//intersecting the root element at the threshold that we defined.
//function will called with 2 arguments: threshold entries and observer
const header = document.querySelector(".header");
const navHeight = nav.getBoundingClientRect().height;

const stickyNav = function (entries) {
  const [entry] = entries;
  console.log(entry);
  if (!entry.isIntersecting) {
    nav.classList.add("sticky");
  } else {
    nav.classList.remove("sticky");
  }
};

const obsOptions = {
  root: null,
  threshold: 0, //when element is hidden from viewport
  rootMargin: `-${navHeight}px`,
};

const headerObserver = new IntersectionObserver(stickyNav, obsOptions);
headerObserver.observe(header);

//Stop observing
//Observer is argument in callback function
observer.unobserve(entry.target);

intersection observer api root

const obsCallback = function (entries) {
  entries.forEach(el => console.log(el));
}

const obsOption = {
  root: null,
  threshold: 0.1,
}

const observer = new IntersectionObserver(obsCallback, obsOption);
observer.observe(section1); //Target Section