在媒體休息時刪除的類

Question

我已將我的代碼縮小到基本要點我有一個導航欄，可以向上和向下滾動，一切正常，因爲它應該是問題區域，我將它隱藏在990斷點處，如果您在該中斷點處滾動，然後全屏顯示，移除其中一個名爲active的類，然後如果我開始滾動，它將恢復正常。有什麼辦法強制這個類回到JavaScript？

顯示問題向下滾動，您將看到導航工作，然後收縮屏幕和滾動，您將看不到任何內容，因爲我沒有爲它添加代碼。但在滾動後在移動設備上全屏顯示，您將看到在移動設備中滾動後活動不會被添加回siteHeader。

(function($) { 
 
    var header = $('.siteHeader'); 
 

 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() > 300) { 
 
     header.addClass('fixed active').off('transitionend'); \t \t 
 
    } else if (header.hasClass('active')) { 
 
     header.removeClass('active').one('transitionend', function() { 
 
     header.removeClass('fixed'); 
 
\t \t header.addClass('active'); 
 
     }); 
 
    } 
 
    }).scroll(); 
 

 
})(jQuery); 
 

 

 
$(document).ready(function(){ 
 
    $(this).scrollTop(0); 
 
    $('.siteHeader').addClass('active'); 
 
});

header nav, section { 
 
\t display: block; 
 
} 
 
.headerNav { 
 
\t height: auto; \t 
 
\t float: right; 
 
\t margin: 0px; 
 
} 
 
.headerNav ul li { 
 
\t display: inline-block; 
 
\t margin-left: 40px; 
 
} 
 
.siteHeader.fixed .branding img { 
 
\t height: 55px; 
 
\t margin: 5px 25px; 
 
} 
 
.siteHeader { 
 
\t height: 86px; 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t z-index: 11; 
 
\t background-color: transparent; 
 
\t -webkit-transition: -webkit-transform .3s; 
 
\t transition: transform .3s; 
 
\t -moz-transform: translateY(-86px); 
 
\t -ms-transform: translateY(-86px); 
 
\t -webkit-transform: translateY(-86px); 
 
\t transform: translateY(-86px); 
 
} 
 
.siteHeader.fixed { 
 
\t width: 100%; 
 
\t height: 66px; 
 
\t position: fixed; 
 
\t top: 0px; 
 
\t background-color: #000; 
 
\t -moz-transform: translateY(-130px); 
 
\t -ms-transform: translateY(-130px); 
 
\t -webkit-transform: translateY(-130px); 
 
\t transform: translateY(-130px); 
 
\t transition: transform .3s; 
 
} 
 
.siteHeader.active { 
 
\t -moz-transform: translateY(0px); 
 
\t -ms-transform: translateY(0px); 
 
\t -webkit-transform: translateY(0px); 
 
\t transform: translateY(0px); 
 
\t transition: transform .3s; 
 
} 
 
.siteHeader.fixed.active { 
 
\t -moz-transform: translateY(0px); 
 
\t -ms-transform: translateY(0px); 
 
\t -webkit-transform: translateY(0px); 
 
\t transform: translateY(0px); 
 
\t transition: transform .3s; 
 
} 
 

 
@media (max-width: 990px) { 
 
\t .siteHeader{ 
 
\t \t display: none; \t 
 
\t } \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="siteHeader">  
 
\t <nav class="headerNav"> 
 
\t \t <ul> 
 
\t \t \t <li><a href="">Link 1</a></li> 
 
\t \t \t <li><a href="">Link 2</a></li> 
 
\t \t \t <li><a href="">Link 3</a></li> 
 
\t \t \t <li><a href="">Link 4</a></li> 
 
\t \t </ul> \t 
 
\t </nav> 
 
</div> 
 
<div style="height: 1500px;">content</div>

Answer 1

試試這個堆棧

(function($) { 
    var header = $('.siteHeader'); 

    $(window).scroll(function() { 
    if ($(this).scrollTop() > 300) { 
     header.addClass('fixed active').off('transitionend');  
    } else if (header.hasClass('active')) { 
     header.removeClass('active').one('transitionend', function() { 
     header.removeClass('fixed'); 
      header.addClass('active'); 
     }); 
    } 
    }).scroll(); 

})(jQuery); 

$(window).resize(function() {  
    $('.siteHeader').addClass('active'); 
    $('.siteHeader').removeClass('fixed'); 
}); 

$(document).ready(function(){ 
    $(this).scrollTop(0); 
    $('.siteHeader').addClass('active'); 
}); 

Answer 2

嘗試添加第二個事件監聽你的函數也檢查調整大小：

$(window).on('scroll', 'resize', function() { 
    if ($(this).scrollTop() > 300) { 
    header.addClass('fixed active').off('transitionend');  
    } else if (header.hasClass('active')) { 
    header.removeClass('active').one('transitionend', function() { 
     header.removeClass('fixed'); 
     header.addClass('active'); 
    }); 
    } 
});