下拉菜单处于活动状态时如何禁用滚动

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() methot。>

如果不存在课程，则您的页面一定不能以移动宽度显示。因此，只需在以下内容中包装滚动逻辑：

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

希望这会有所帮助！：）