我已将我的代码缩小到基本要点我有一个导航栏,可以向上和向下滚动,一切正常,因为它应该是问题区域,我将它隐藏在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>
它打破了它完全地 – Codi