Question

我已经将我的代码缩小到了基础知识我有一个向上滑动的导航栏和向下滚动的滚动条，所有功能都应该是问题区域我将它隐藏在990断点处，如果你在那个断点处滚动那么去全屏它删除一个名为active的类，然后如果我开始滚动它会恢复正常。有什么方法可以强制该类返回JavaScript吗？

要显示向下滚动的问题，您将看到导航工作然后缩小屏幕并滚动，您将看不到任何内容，因为我没有为其添加代码。但是在移动设备中滚动后再进入全屏状态，您会看到在移动设备中滚动后，活动状态不会被添加回siteHeader。

＆＃13;

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

＆＃13;

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;	
	}	
}

＆＃13;

<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>

＆＃13;

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');
    });
  }
});

在媒体中断时删除了类

2 个答案: