下拉菜單處於活動狀態時如何禁用滾動？

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具有active類，這可以通過jQuery的hasClass()方法完成。

如果不存在該類，則您的頁面不能以移動寬度顯示。 這樣，只需將滾動邏輯包裝在以下內容中：

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

希望這可以幫助！ :)