时间戳

首页 > 解决方案 > 根据重叠的部分切换汉堡菜单背景

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

问题描述

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

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

    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/

任何人都可以阐明它吗？

标签： javascriptscrollintersectionintersection-observer

解决方案

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

推荐阅读