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＆＃39; hasClass() <来完成/ strong>方法。

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

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

希望这有帮助！：）

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

1 个答案: