ドロップダウンメニューがアクティブなときにスクロールを無効にする方法は？

Question

.nav-icon-underlay.activeがオンの場合、画面のスクロールを無効にするにはどうすればいいですか？ナビゲーションメニューがモバイルの幅で表示されていることを意味しますか？

私の問題は、私は次のスクリプトをスクロールしたときに私のナビゲーションメニューが消えていることである：

//HIDE OR SHOW NAVBAR WHEN SCROLLING 
$(window).on('DOMMouseScroll mousewheel', function (event) { 
    //identifying wheelData: wheelDeltaX & wheelDeltaY 
    if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0){ 
    //hides navbar when scrolling down 
    $('.nav-container').slideUp(); 
    } 
    else { 
    //adds navbar when scrolling up 
    $('.nav-container').slideDown(); 
    } 
}); 

/*CSS*/ 
.nav-container.active { 
height: 100%; 
transition: .7s; 
top: 0; 
display: block; 
}/* show drop-down menu */ 
/*HIGHLIGHT*/ 

.nav-container.scroll { 
display: block; 
} 

感謝！

Answer 1

まあ一番簡単な方法は、nav-icon-underlayはjQueryのhasClass()方法で行うことができるクラスactiveを、持っているかどうかを確認するために、条件を使用することです。

クラスが存在しない場合、ページはモバイルの幅で表示されていてはなりません。そのため、単純に次の内側にあなたのスクロールロジックをラップ：既存のコードと組み合わせ

if (!$('.nav-icon-underlay'.hasClass('active') { } 

は、次のようになります。

$(window).on('DOMMouseScroll mousewheel', function (event) { 
    if (!$('.nav-icon-underlay'.hasClass('active') { 
    //identifying wheelData: wheelDeltaX & wheelDeltaY 
    if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0){ 
     //hides navbar when scrolling down 
     $('.nav-container').slideUp(); 
    } 
    else { 
     //adds navbar when scrolling up 
     $('.nav-container').slideDown(); 
    } 
    } 
}); 

・ホープこのことができます！ :)