如何基于屏幕尺寸使用JavaScript切换导航栏类

嘿，我来帮你搞定这个导航栏的问题！你想要在屏幕宽度小于768px时把固定导航栏改成静态的，解决移动端菜单的布局冲突，这个需求很常见，用JavaScript就能轻松实现，我给你一步步拆解：

核心实现思路 #

我们需要监听窗口的resize事件，实时判断当前视口宽度，然后动态切换导航栏的类名——移除固定类，添加静态类，反之亦然。

完整代码示例 #

首先是JavaScript部分：

// 获取导航栏元素
const navElement = document.getElementById('mynav');

// 定义切换导航栏位置的函数
function toggleNavClass() {
    // 获取当前视口宽度（兼容不同浏览器）
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    
    if (viewportWidth < 768) {
        // 屏幕小于768px时，切换为静态导航
        navElement.classList.remove('navbar-fixed-top');
        navElement.classList.add('navbar-static-top');
    } else {
        // 屏幕大于等于768px时，恢复固定导航
        navElement.classList.remove('navbar-static-top');
        navElement.classList.add('navbar-fixed-top');
    }
}

// 页面加载完成后先执行一次，确保初始状态正确
document.addEventListener('DOMContentLoaded', toggleNavClass);

// 监听窗口 resize 事件，实时更新导航栏状态
window.addEventListener('resize', toggleNavClass);

优化建议：添加防抖函数 #

如果窗口 resize 时频繁触发函数会有点性能浪费，我们可以加个简单的防抖函数来限制触发频率：

// 防抖函数：延迟执行，避免频繁触发
function debounce(func, delay = 150) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
    };
}

// 用防抖后的函数监听 resize 事件
window.addEventListener('resize', debounce(toggleNavClass));

补充：CSS替代方案（如果不需要JS联动） #

如果你只是单纯想改变定位方式，也可以用CSS媒体查询直接实现，不用写JS：

@media (max-width: 767px) {
    #mynav.navbar-fixed-top {
        position: static;
        /* 可以补充一些额外的样式调整，比如margin、padding */
    }
}

不过如果你的需求里还有其他和类名绑定的逻辑，那还是用JS切换类名的方式更灵活。

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