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

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>

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

我看到了一个要使用的代码示例，但我不知道如何将它添加到我上面的代码中。

// 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 ]] 
      }

    }