导航栏不适用于 Intersection Observer API

Question

我在使用 Intersection Observer API 时遇到问题。我正在尝试使用它，一旦滚动时导航栏不再可见，则使后者以白色背景显示并固定到视口。

当导航栏可见或不可见时，我首先尝试 console.log('visible') 和 console.log('visible') 并且我成功了！但是当我想在导航栏不再可见时应用新类时，我的页面开始变得疯狂：应用和删除了该类，并且控制台一直只显示“可见”、“不可见”经常。

我认为这是因为当我应用该类时，它会移动（选项对象的）rootMargin，但我不知道如何修复它。

我的整个网站（我的代码在 app.js 中）：https://replit.com/@Xeway/IntersectionObserver#app.js

PS : 我只有 build app.js，HTML 和 CSS 是 FreeCodeCamp 制作的代码。 PS：抱歉链接，但我不能在这里分享这个代码，因为我的代码使用反引号，它似乎不起作用^^另外，尝试打开一个大宽度的网站，因为它是响应式的，你可以看到更多当它在计算机的屏幕宽度上时，正是问题所在。

提前谢谢你们的回答:)

Answer 1

您的案例不需要交叉路口观察员。 当窗口滚动超过一定高度时，您只需要将类应用于标题。 在您的情况下，它将等于标题的高度。 所以，当窗口滚动高度>标题高度时，则应用类 在 else 中，删除该类。 在 document.ready 上也调用相同的函数（如果窗口已经滚动，则检查页面加载时的窗口滚动位置）。

这里是您的帮助的小脚本：

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