Question

我有这个javascript代码，可以让我的网站的顶部导航缩小。见下文：

<script>
        function init() {
            window.addEventListener('scroll', function(e){
                var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                    shrinkOn = 300,
                    header = document.querySelector("header");
                if (distanceY > shrinkOn) {
                    classie.add(header,"smaller");
                } else {
                    if (classie.has(header,"smaller")) {
                        classie.remove(header,"smaller");
                    }
                }
            });
        }
        window.onload = init();
    </script>

当窗口向下滚动指定距离时，代码会将“较小”类添加到标题部分，并在向上滚动时减少它。但是，我希望仅在屏幕大于768px时才添加和删除类（即最小宽度：768px）。在较小的屏幕尺寸上，我不希望添加和删除类工作。

我看到了要使用的代码示例，但我不确定如何将其添加到上面的代码中。

// media query event handler
if (matchMedia) {
  const mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }

}

任何有关如何结合这一点的帮助将不胜感激。

Answer 1

根据您的描述，您希望在条件中添加现有代码，因此：

// media query event handler
    if (matchMedia) {
      const mq = window.matchMedia("(min-width: 768px)");
      mq.addListener(WidthChange);
      WidthChange(mq);
    }

    // media query change
    function WidthChange(mq) {
      if (mq.matches) {
        [[ YOUR CODE ]]
      } else {
       [[ UNBIND SCROLL LISTENER ]] 
      }

    }

在Javascript事件侦听器中包含CSS媒体查询

1 个答案: