根据屏幕尺寸替换导航栏 class

Question

问题

如何使用 javascript.

交换 class 个导航栏

背景

我有一个固定的导航栏，我想在较小的屏幕尺寸（< 768 像素）上将其更改为静态导航栏，因为我的移动菜单推送器由于固定导航而出现布局问题。

HTML

<nav class="navbar navbar-default navbar-fixed-top" id="mynav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data- 
 toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
   controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

我尝试创建一个 javascript 函数来添加/删除静态导航 class 但由于某些原因它不起作用。

JS

function changeNav() {
    if ($(window).width() < 768) {
        $("#mynav").addClass("navbar-static-top");
        $("#mynav").removeClass("navbar-fixed-top");
    } else {
        $("#mynav").removeClass("navbar-static-top");
        $("#mynav").addClass("navbar-fixed-top"); 
    }
}
changeNav();

Answer 1

使用 css media queries 可能比 javascript 更容易完成。

示例：

@media (max-width: 768px) {
    // styles for device width <= 768px 
}

如果您真的想使用 javascript，那么 Abdeslem Charif 的回答是一个好的开始

Answer 2

你可以用这个代替，这个很合适，性能更好：

let lastState = false;
function checkForViewportChange () {
    var state = window.matchMedia("(max-width: 768px)").matches;
    if (state != lastState) {
        if (state) {
            //do your stuff here
        } else {
            //do your other stuff here
        }
        lastState = state
}}

window.setInterval (checkForViewportChange, 150);

Answer 3

您应该在每次用户调整屏幕大小时检查，使用 .resize() 方法

例如

$(window).resize(() => {
    let b = $(window).width() < 768;
    $("#mynav").addClass("navbar-"+(b ? "static":"fixed")+"-top");
    $("#mynav").removeClass("navbar-"+(b ? "fixed":"static")+"-top");
});

根据屏幕尺寸替换导航栏 class

Replacing navbar class based on screen size

javascript

nav

问题

背景

HTML

JS