javascript - 根据窗口宽度添加标题类

我想在断点是窗口宽度小于1000px的地方切换标头类，但是当我将尺寸从大到小调整时效果很好，反之亦然。

这是html的示例：

<header class="header-1">
  ........
</header>

这里的头文件类可能是header-1，header-2 ......等等

这是js代码：

jQuery(window).on('load resize', function(){
    var width = jQuery(window).width();
    var header = jQuery(document).find('header');
    var headerClass = header.attr('class');
    if(width < 1000){
        if( headerClass !== 'header-6' ){
            header.removeClass(headerClass);
            header.addClass('header-xs');
        }else{
            header.removeClass('header-xs').addClass(headerClass);
        }
    }
});

最佳答案

因为恢复大小时未恢复状态。在else条件下恢复状态：

jQuery(window).on('load resize', function(){
        var width = jQuery(window).width();
        var header = jQuery(document).find('header');
        var headerClass = header.attr('class');
        if(width < 1000){
            if( headerClass !== 'header-6' ){
                header.removeClass(headerClass);
                header.addClass('header-xs');
            }else{
                header.removeClass('header-xs').addClass(headerClass);
            }
        }else{
           // you have to restore the previous state here
        }
    });

关于javascript - 根据窗口宽度添加标题类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43867443/