我将导航菜单设置为显示:无,该菜单在滚动时出现,并在回到顶部时消失。

一旦到达某个断点(例如,最大宽度:786px)并显示菜单,是否可以禁用滚动功能?

Java脚本

$(window).on("scroll", function() {

        if($(window).scrollTop()) {
              $('nav').addClass('show');
        }

        else {
              $('nav').removeClass('show');
        }
  })


的CSS

.show {

   display: block

      }

最佳答案

您可以使用javascript或CSS来解决此问题,但是我个人会使用javascript。

首先,对于javascript解决方案,您需要的功能是:

window.innerWidth


它将返回整个窗口宽度,不包括滚动条。详细了解here

因此,按照Temani Afif的建议,您可以在滚动功能内编写一个测试,以检查所需的窗口宽度,如下所示:

$(window).on("scroll", function() {
    if (window.innerWidth <= 786) return;

    // Your other code here
})


对于纯CSS解决方案,您可以使用媒体查询覆盖“ show”类的效果:

.show {
   display: block
}
@media screen and (max-width: 786px) {
    nav {
       display: block !important
    }
}


有关媒体查询的更多信息here

07-24 09:38
查看更多