How to configure IntersectionObserver?

The page is divided into several sections. You need to colback worked only when crossing a section of the top border of the viewport. Is it possible to achieve this using IntersectionObserver?
June 3rd 19 at 19:06
2 answers
June 3rd 19 at 19:08
Solution
if ('IntersectionObserver' in window) {

 let config = { 
 root: document.querySelector('#scrollArea'), // if not specified, root is the viewport
 rootMargin: '0px', // '10px 10px 10px 10px' margins will be included in the tracking area of intersection. The Observer will call for kalbak 10px to the intersection of the section c either side root. 'px' is mandatory.
 threshold: [.0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1] // call, kalbac crossing every 10%. [0] to call kulbaka once at the first intersection
};

 // set up observer handler and config
 sectionObserver = new IntersectionObserver(onIntersection, config); 

 // bind the created observer on elements 
 let sections = document.querySelectorAll('section');
 sections.forEach(section => {
sectionObserver.observe(section);
});

 // handler observer
 onIntersection function (entries, self) {
 if (entry.intersectionRatio > 0.5) {
 // section crossed observer's root 50%
}
});
}
Thank you! - Tanner_Murazik commented on June 3rd 19 at 19:11
June 3rd 19 at 19:10
The "correct" method I found, but you can check entry.boundingClientRect.top, when crossing the upper boundary it is near zero, and at the intersection of the bottom is approximately equal to the height of the viewport.

jsfiddle.net/w5xzLfvk

Find more questions by tags JavaScript