调整窗口大小时删除类

Question

首先我说，结果我需要得到什么。

我需要，当窗口宽度超过500px时，在我的导航菜单中添加了类＆＃34;固定＆＃34;。当窗口宽度小于500px时，从该导航菜单类＆＃34;固定＆＃34;被删除了。

此示例使用$（window）.ready（），但使用$（window）.resize（）class＆＃34; fixed＆＃34;当窗口小于500px时，不会移除。我很困惑..有什么问题？提前致谢

Jsfiddle

function navigation() {
    var windowWidth = $(window).width();

    if ( windowWidth > 500 ) {
        $(document).scroll(function () {
            var menuFixed = $(this).scrollTop();
            if (menuFixed > 300) {
                $('.nav').addClass('fixed');
            } else {
                $('.nav').removeClass('fixed');
            }
        });
    } else {
        $('.nav').removeClass('fixed');
    }
}

$(window).ready(function(){
    navigation();
});

$(window).resize(function(){
    navigation();
});

Answer 1

您可以使用CSS3解决此问题

@media max-width 500px {
.menuFixed { position: fixed;}
}

Refer to Mozilla ♥ for more details