在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>

當窗口向下滾動指定距離時，該代碼將“小”類添加到標題部分，而向后滾動則減小該類。 但是，我希望僅在屏幕大於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 ]] 
      }

    }