javascript - 向响应式移动设备添加类

Question

我的问题是如何向响应式移动设备添加类。我需要的是在窗口宽度小于 720px 时将此类“scrolled”添加到滚动事件和 window.resize 中。例如:

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 10) {
            $('nav').addClass('scrolled');
        }
        else {
            $('nav').removeClass('scrolled');
        }
    });
    var width = $(window).width();
    $(window).resize(function () {
        if (width <= '720px') {
            $('nav').addClass('scrolled');
        }
    });
})

body{
    height:2000px;
}
nav{
    width:100%;
    height:80px;
    background-color:#10de60;
    transition:all .4s ease-in-out;
}
nav.scrolled{
    height:60px;
    background-color:#ffd800;
    position:fixed;
    top:0;
    left:0;
    right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    my Nav
</nav>

Answer 1

尝试删除 px:

var width = $(window).width();
$(window).resize(function () {
    if (width <= 720) {
        $('nav').addClass('scrolled');
    }
});