如何实现向下滚动页面时切换Bootstrap导航栏菜单的显示状态

问题原因 #

• 显示隐藏逻辑倒置：滚动超过阈值时的操作和需求完全相反
• 类操作逻辑错误：未正确使用Bootstrap的d-none/d-block类实现显示隐藏
• 代码冗余：重复定义了两次滚动事件和滚动处理函数
• 缺少DOM加载判断：如果JS代码放在页面头部，会出现DOM未加载完成就获取元素导致的报错

修复方案 #

1. 调整JS逻辑 #

以下代码支持两种触发逻辑：你可以选择固定滚动距离触发，也可以选择滚动超过某一指定div触发，按需选择即可，替换你现有全部JS代码：

document.addEventListener('DOMContentLoaded', function() {
    const mainMenu = document.getElementById('main-menu');
    const scrollMenu = document.getElementById('scroll-menu');
    let scrollThreshold = 700; // 固定700px滚动距离触发的话保留这行即可

    // --- 如果要滚动超过某一div触发，替换上面的scrollThreshold赋值即可，示例如下 ---
    // const targetDiv = document.getElementById('你要判定的div的id');
    // scrollThreshold = targetDiv.offsetTop + targetDiv.offsetHeight;
    // -------------------------------------------------------------------------

    function scrollFunction() {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > scrollThreshold) {
            // 滚动超过阈值：隐藏主菜单，显示滚动菜单
            mainMenu.classList.add('d-none');
            mainMenu.classList.remove('d-block');
            scrollMenu.classList.remove('d-none');
            scrollMenu.classList.add('d-block');
        } else {
            // 未超过阈值：显示主菜单，隐藏滚动菜单
            mainMenu.classList.remove('d-none');
            mainMenu.classList.add('d-block');
            scrollMenu.classList.add('d-none');
            scrollMenu.classList.remove('d-block');
        }
    }
    window.onscroll = scrollFunction;
    // 页面加载时先执行一次，适配刷新后滚动条不在顶部的场景
    scrollFunction();
})

2. 可选HTML优化 #

如果需要避免导航切换时页面内容跳动，给#main-menu也加上fixed-top类，同时给body设置padding-top，数值等于主菜单的高度，避免页面顶部内容被固定导航遮挡。

内容的提问来源于stack exchange，提问作者user15514832