メディアブレーク時にクラスが削除される

Question

私のコードを基本に縮小しました。ナビゲーションバーが上下にスクロールしています。すべての機能が問題領域にあるはずです。990ブレークポイントで非表示にしますそのブレークポイントでスクロールし、フルスクリーンになるとアクティブなクラスの1つが削除され、次にスクロールを開始すると通常の状態に戻ります。そのクラスをJavaScriptに強制的に戻す方法はありますか？

問題をスクロールして表示すると、ナビゲーション作業が表示され、画面を縮小してスクロールすると、コードを追加していないので何も表示されません。モバイルでスクロールした後にフルスクリーン表示され、モバイルでスクロールした後にアクティブがsiteHeaderに追加されないことがわかります。また、サイズ変更を確認するためにあなたの関数に2つ目のイベントリスナーを追加する

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