Question

我有一个导航菜单设置为display：none，在滚动时显示，并在顶部消失后消失。

有没有办法在达到某个断点（例如max-width：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解决方案，您可以覆盖＆＃39; show＆＃39;具有媒体查询的类：

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

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

Answer 2

您可以在浏览器调整大小时激活/停用滚动侦听器。这样，当浏览器宽度超过786px时，每次用户滚动时都不会调用滚动侦听器。

var scrollListenerActive = false;
var handleScrollListener = function() {
if( $(window).width() < 786 && !scrollListenerActive ) {
  $(window).on("scroll", function() {

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

        else {
              $('nav').removeClass('show');
        } 
  });
  scrollListenerActive = true;
} else {
   $(window).off("scroll");
   scrollListenerActive = false;
}
}
$(document).ready(handleScrollListener); // attach the listener on page load
$(window).resize(handleScrollListener); // attach/remove listener on window resize

Answer 3

这是一个很好的策略，但是你要监听的事件只是'调整大小'，在窗口对象上（一些旧的浏览器可以在任何dom元素上执行，但最好是与标准保持一致和最新）

类似于：

window.addEventListener('resize',function(){
  if(window.innerWidth >= 768){
    document.body.style['overflow-x'] = 'hidden';
  }
  else{
    document.body.style['overflow-x'] = 'auto';
  }
});

如果您希望滚动条始终显示小于768，则可以将'自动'换成“滚动”。

同样，如果你想影响两个滚动条，你可以关掉'overflow'而不是'overflow-x'。

请记住，在调整窗口大小时，事件往往会针对每个宽度和高度的变化触发，以防您在调整大小时有其他逻辑可能会出现多次触发（数千或更多）的问题。 / p>

这也适用于最大化/恢复，因为它们也会触发调整大小事件。

如果需要，这是关于resize事件的MDN文档： https://developer.mozilla.org/en-US/docs/Web/Events/resize

这是vanilla javascript，所以无论你是否使用像jquery这样的lib，它都应该有效。

在窗口调整大小/媒体查询时删除滚动功能

3 个答案: