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)
    })

这是我的问题的一个例子：

https://jsfiddle.net/bc7w8zt1/

任何人都可以对它有所了解吗？

Answer 1

我认为JSFiddle确实存在问题，至少在更改IO设置时无法从中得到任何响应。在实际站点上，具有固定的顶部边距和可变的底部边距取决于视口高度：视口中的顶部边距必须高于底部边距，否则CB不会触发。我认为这是JSFiddle问题的一部分-视口非常短。例如，使用rootMargin:'-50px 0px -90% 0px'时，视口（window.innerHeight）必须至少为500px（实际上是〜490px起作用），以便您观察的div触发视口的底边距至少比其低50px（innerHeight的10％）到达顶部边缘之前，它与顶部之间的距离固定为50px。如果底部在顶部内（即上方），则不会开火。对于任何视口，尽管我再也无法从JSFiddle得到任何东西，但这似乎可行：rootMargin:'0px 0px -100% 0px'。在灰色div的顶部到达视口的顶部之前，这不会触发IO回调，并且随着您不断滚动，灰色div将相交直到屏幕外。汉堡菜单类别会相应更改。

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

1 个答案: