根据重叠的部分切换汉堡菜单背景

Question

我试图更改我网站上的汉堡菜单，每次它位于浅色背景部分的顶部以便可见。我尝试使用交叉点观察器，该解决方案似乎有效，但它在滚动时触发得太早，实际上在该部分与菜单相交之前。

我是路口观察者的新手，我试图在网上找到一些有用的东西，但运气不佳。

    const body = document.querySelector('body')
    const sections = body.querySelectorAll('.change-menu')
    const options = {
        root: null,
        threshold: 0,
        rootMargin:'-40px 0px -80% 0px'
    }


    const observer = new IntersectionObserver((entries,observer) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                document.querySelectorAll('.menu-item').forEach(bar => {
                    body.classList.add('black')
                })
            } else {
                document.querySelectorAll('.menu-item').forEach(bar => {
                    body.classList.remove('black')
                })
            }
            })

    }, options)



    sections.forEach(section => {
      observer.observe(section)
    })

这是我的问题示例的 jsfiddle：

https://jsfiddle.net/bc7w8zt1/

有人可以解释一下吗？

Answer 1

我认为 JSFiddle 有问题，至少，当我更改 IO 设置时，我无法从它那里得到任何响应。在真实站点上，具有固定的上边距和可变的下边距取决于视口高度：视口中的上边距必须高于下边距，否则 CB 不会触发。我认为这是 JSFiddle 中问题的一部分——视口非常短。例如，对于 rootMargin:'-50px 0px -90% 0px'，视口 (window.innerHeight) 必须至少为 500px（实际上 ~490px 有效），以便您正在观察的 div 触发视口的底部边距至少 50px（10 % of innerHeight) 从顶部向下移动，直到它到达顶部边距距离顶部固定的 50px。如果底部在顶部内部（即上方），则不会触发。对于任何视口，尽管我再次无法从 JSFiddle 获得任何信息，但这似乎有效：rootMargin:'0px 0px -100% 0px'。这不会触发 IO 回调，直到灰色 div 的顶部到达视口的顶部，并且当您继续滚动时，灰色 div 将相交直到它离开屏幕。汉堡包菜单 class 相应更改。

根据重叠的部分切换汉堡菜单背景

toggle a burger menu background based on which section is overlapping

javascript

scroll

intersection

intersection-observer