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

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（innerHeight 的 10%），然后才会点击顶部边距距顶部固定 50px。如果底部在顶部内部（即上方），则不会触发。对于任何视口，虽然我再次无法从 JSFiddle 获得任何信息，rootMargin:'0px 0px -100% 0px'. 这将不会触发 IO 回调，直到灰色 div 的顶部到达视口的顶部，并且当您继续滚动时，灰色 div 将相交直到它离开屏幕。汉堡菜单类相应地发生变化。