javascript - 删除窗口调整大小/媒体查询的滚动功能

Question

我有一个导航菜单设置为 display:none，它在滚动时出现并在回到顶部后消失。

有没有办法在我到达某个断点(例如最大宽度:786px)并显示菜单时禁用滚动功能？

Javascript

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

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

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

CSS

.show {

   display: block

      }

Answer 1

您可以使用 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