Breaking News: Grepper is joining You.com. Read the official announcement!

intersection observer API

Add Answer

Glamorous Goshawk answered on May 30, 2022 Popularity 9/10 Helpfulness 1/10

answer intersection observer API

related intersection observer api

related intersection observer api root

intersection observer API

Comment

//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);

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: api intersection-observer javascript

Link to this answer
Share Copy Link

Contributed on Aug 17 2022

Glamorous Goshawk

0 Answers Avg Quality 2/10

Closely Related Answers

intersection observer api

Comment

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.

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: api

Link to this answer
Share Copy Link

Contributed on May 30 2022

Creepy Caribou

0 Answers Avg Quality 2/10

intersection observer api root

Comment

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

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: api

Link to this answer
Share Copy Link

Contributed on Aug 25 2022

Dawood Idrees

0 Answers Avg Quality 2/10

intersection observer API

Contents

More Related Answers

intersection observer API

Closely Related Answers

intersection observer api

intersection observer api root

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.