覆盖层菜单打开时如何禁止顶部导航栏自动收缩

安全阿岳

2026-10-8

解决方案

你可以通过两层逻辑结合实现需求，从根源避免导航栏收缩触发：

给导航收缩逻辑增加开关判断
修改原有的navbarCollapse函数，先判断覆盖层菜单是否处于激活状态，是则直接跳过收缩逻辑，和原有jQuery代码风格保持统一：

var navbarCollapse = function() {
    // 新增判断：菜单打开时直接终止执行
    if ($('.menu').hasClass('open')) {
        return;
    }
    if ($("#mainNav").offset().top > 100) {
        $("#mainNav").addClass("navbar-shrink");
    } else {
        $("#mainNav").removeClass("navbar-shrink");
    }
};

覆盖层打开时禁用页面滚动（推荐额外添加）
在菜单开闭逻辑中新增body滚动控制，避免用户滚动背景页面，彻底消除滚动触发的导航栏状态变化，也更符合覆盖层菜单的通用交互习惯：
修改openMenu函数如下：

function openMenu() {
    if (menu.classList.contains('open')) {
        menu.classList.add('close');
        iconMenu.classList.remove('icon-closed');
        // 关闭菜单时恢复页面滚动
        document.body.style.overflow = 'auto';
        // 关闭后主动触发一次导航收缩逻辑，复位导航栏状态
        navbarCollapse();
        
        setTimeout(function() {
            menu.classList.remove('open');
        }, 200);

    } else {
        menu.classList.remove('close');
        menu.classList.add('open');
        iconMenu.classList.add('icon-closed');
        iconMenu.classList.remove('.nav-link');
        // 打开菜单时禁用页面滚动
        document.body.style.overflow = 'hidden';
    }
};