導航欄不適用於 Intersection Observer API

Question

我在使用 Intersection Observer API 時遇到問題。 我正在嘗試使用它，一旦滾動時導航欄不再可見，使后者以白色背景顯示並固定到視口。

我首先嘗試在導航欄可見或不可見時使用console.log（'visible'）和console.log（'visible'）並且我成功了，但是當我想應用新的class時導航欄不是' t 不再可見：我的頁面開始變得瘋狂，class 被應用和刪除，控制台只顯示“可見”。 “不可見”一直非常頻繁。

我認為這是因為當我應用 class 時，它會移動（選項對象的）rootMargin，但我不知道如何修復它。

我的整個網站（我的代碼在 app.js 中）： https://replit.com/@Xeway/IntersectionObserver#app.js

PS：我只有 build app.js，HTML 和 CSS 是 FreeCodeCamp 制作的代碼。 PS：抱歉鏈接，但我不能在這里分享這段代碼，因為我的代碼使用了反引號，它似乎不起作用^^另外，嘗試用大寬度打開網站，因為它是響應式的，你可以看到更多當它在計算機的屏幕寬度上時，正是問題所在。

提前感謝您的回答，伙計們：）

Answer 1

您的情況不需要交叉口觀察員。 當 window 滾動超過一定高度時，您只需要將 class 應用於您的 header。 在您的情況下，它將等於 header 的高度。 因此，當 window 滾動高度 > header 的高度時，然后應用 class 並在其他情況下刪除 ZA2F2ED4A298EBC2ABCB1DDC24。 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).

這是為您提供幫助的小腳本：

$(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');
}