如何让matchMedia与scrollTop函数一起工作？

Question

我需要在下面的代码中添加一个matchMedia查询，使其仅在视口宽度为1366px时激活，我尝试了几个不同的选项，但都没有效果。

<script type="text/javascript">

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size

$(document).ready(function(){

window.addEventListener('scroll', scrollFunction);
window.addEventListener('scroll', progressBarFunction);

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;

function scrollFunction() {

  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {

    document.getElementById("logoImg").style.width = "123px";
    document.getElementById("logoImg").style.margin = "18px 40px";
    document.getElementById("button-container-super").style.top = "-5px";
    document.getElementById("menu-text").style.padding = "0.6em 0.9em 0em 0.9em";
    document.getElementById("digital").style.opacity = "0";
    document.getElementById("myBar").style.width = scrolled + "%";

  } else {

    document.getElementById("logoImg").style.width = "170px";
    document.getElementById("logoImg").style.margin = "30px 40px";
    document.getElementById("button-container-super").style.top = "8px";
    document.getElementById("menu-text").style.padding = "1.5em 0.9em 0em 0.9em";
    document.getElementById("digital").style.opacity = "1";
  }
}
});
</script>

我将非常感谢任何帮助。

谢谢Marc

Answer 1

https:/developer.mozilla.orgen-USdocsWebAPIWindowmatchMedia。

matchMedia 返回有属性的对象 matches

一个布尔值，如果文档当前匹配媒体查询列表，则返回true，如果不匹配则返回false。

function scrollFunction() {
  const mq = window.matchMedia("(min-width: 1366px)");

  if (mq.maches) {
    if (
      document.body.scrollTop > 80 ||
      document.documentElement.scrollTop > 80
    ) {
      document.getElementById("logoImg").style.width = "123px";
      document.getElementById("logoImg").style.margin = "18px 40px";
      document.getElementById("button-container-super").style.top = "-5px";
      document.getElementById("menu-text").style.padding =
        "0.6em 0.9em 0em 0.9em";
      document.getElementById("digital").style.opacity = "0";
      document.getElementById("myBar").style.width = scrolled + "%";
    } else {
      document.getElementById("logoImg").style.width = "170px";
      document.getElementById("logoImg").style.margin = "30px 40px";
      document.getElementById("button-container-super").style.top = "8px";
      document.getElementById("menu-text").style.padding =
        "1.5em 0.9em 0em 0.9em";
      document.getElementById("digital").style.opacity = "1";
    }
  }
}