Question

我的网站上有一个正确的菜单。在移动设备和小型设备上，右侧菜单与内容重叠。

我试图在页面稳定时隐藏正确的菜单。一旦用户滚动菜单需要出现。如果滚动停止，我也需要隐藏菜单。我只需要在滚动期间显示它。

通常我们使用以下功能而不是我的问题的任何其他解决方案：

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('.a').fadeIn();
  } else {
    $('.a').fadeOut();
  }
});

我为此找到了另一种解决方案..

 $(window).scroll($.debounce( 250, true, function(){
            $('.icon-bar-left').show();
            $('.icon-bar-right-arrow').hide();
        } ) );

Answer 1

您的解决方案不对。制作菜单图标（条形）并显示所需分辨率的默认值，例如：

@media only screen and (max-width: 600px) {
   .menu {
        display: none
    }
    .menu-icon {
      display: block;  
    }
}
@media only screen and (min-width: 600px) {
   .menu {
        display: block;
    }
    .menu-icon {
      display: block;  
    }

}

使用JS，为图标和切换菜单添加一个事件。用户从菜单中单击某个项目后，菜单将崩溃。

这是实现响应式菜单的标准方法。

Answer 2

试用此代码，或在this Codepen

上测试

JS：

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('.menu').addClass('visible');
  } else {
    $('.menu').removeClass('visible');
  }
});

CSS：

.menu {
  position:fixed;
  top:0;
  opacity:0;
}
.menu.visible {
  opacity:1;
}

当然，你还需要在你的css中使用媒体查询，但是现在我只想帮助JS并让你想到使用“可见”类。

Answer 3

$(window).scroll($.debounce( 250, true, function(){ $('.icon-bar-left').show(); $('.icon-bar-right-arrow').hide(); } ) );

这是从网上找到的，它运作良好..

如何仅在页面滚动时显示菜单

3 个答案: