javascript - 媒体休息时类(class)被删除

Question

我已经将我的代码缩小到最基本的水平我有一个导航栏，可以在滚动时上下滑动，一切正常，问题区域是我将它隐藏在 990 断点处，如果你在那个断点处滚动，那么全屏显示它会删除一个名为 active 的类，然后如果我开始滚动它会恢复正常。有什么办法可以在 JavaScript 中强制返回该类？

要显示问题，请向下滚动，您会看到导航工作，然后缩小屏幕并滚动，您将什么也看不到，因为我没有为其添加代码。但是在移动设备上滚动后进入全屏，您会看到在移动设备上滚动后事件不会添加回 siteHeader。

(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);


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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="siteHeader">    
	 <nav class="headerNav">
		<ul>
			<li><a href="">Link 1</a></li>
			<li><a href="">Link 2</a></li>
			<li><a href="">Link 3</a></li>
			<li><a href="">Link 4</a></li>
		</ul>  	
	</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');
});