|
|
// Create a function that will handle any intersection between some elements and the viewport.
|
|
|
const handleHeaderIntersection = function (entries) {
|
|
|
entries.forEach(entry => {
|
|
|
if (entry.isIntersecting) {
|
|
|
msgConsole('IntersectionObserver','The header is visible in the viewport');
|
|
|
if (typeof headerIsNowVisible === 'function') headerIsNowVisible(entry);
|
|
|
} else {
|
|
|
msgConsole('IntersectionObserver','The header is invisible in the viewport');
|
|
|
if (typeof headerIsNowInvisible === 'function') headerIsNowInvisible(entry);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const section_header = document.querySelector("header");
|
|
|
if (section_header) {
|
|
|
const headerObserver = new IntersectionObserver(handleHeaderIntersection);
|
|
|
if (headerObserver) headerObserver.observe(section_header);
|
|
|
} else myLog('No header to observe');
|
|
|
|
|
|
|
|
|
|