导航栏不适用于 Intersection Observer API

Question

I have a problem when I use the Intersection Observer API. I am trying to use it for, once the nav-bar is not visible anymore when you scroll, make this latter appears with a white background and fixed to the viewport.

I first of all tried to console.log('visible') and console.log('visible') when the nav-bar is visible or not and I succeed, But when I wanted to apply the new class when the navbar wasn't visible anymore: my page starting to get mad, the class was applied and removed, and the console was only displaying "visible". "not visible" all the time very frequently.

I think it is because when I apply the class, it moves the rootMargin (of the options object) but I don't know how to fix it.

My entire website (my code is in app.js): https://replit.com/@Xeway/IntersectionObserver#app.js

PS: I only have build app.js, HTML and CSS are codes made by FreeCodeCamp. PS: Sorry for the link, but I can't share this code here because my code uses backtick and it doesn't seems to work ^^ Also, try to open the website with a big width because it's responsive and you can see more precisely the problem when it's on a computer's screen width.

Thank you in advance for your answers guys:)

Answer 1

Intersection observer is not needed for your case. You just need to apply class to your header, when window is scrolled beyond certain height. In your case, it would be equal to the height of the header. So, when the window scroll height > height of the header, then apply class and in the else, remove the class. Call the same function on document.ready as well (To check the window scroll position on the page load, if the window is already scrolled).

Here is the little script for your help:

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    // assume 100px is the height of the header
    if (scroll >= 100) {
        addScrolledClassToHeader();
    } else {
        removeScrolledClassToHeader();
    }
});

function addScrolledClassToHeader() {
    $('header.site-header').addClass('header-is-scrolled');
}

function removeScrolledClassToHeader() {
    $('header.site-header').removeClass('header-is-scrolled');
}