根据屏幕大小替换导航栏类

Question

问题

如何使用javascript交换导航栏的类。

背景

我有一个固定的导航栏，我试图在较小的屏幕尺寸（<768px）上更改为静态导航栏，因为我的移动菜单按钮因固定导航而出现布局问题。

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函数来添加/删除静态nav类但由于某种原因它无效。

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

你可以使用它，这是propper并且有更好的表现：

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 2

每次用户调整屏幕大小时都应该检查，使用.resize（）方法

实施例

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

Answer 3

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

示例：

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

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