How do I make matchMedia work with a scrollTop function?

Question

I need to add a matchMedia query to the following code so that it only activates at a viewport width of 1366px, I've tried a few different options but nothing is working.

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

I would greatly appreciate any help.

Thanks Marc

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

matchMedia returns object which has property matches

A Boolean that returns true if the document currently matches the media query list, or false if not.

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";
    }
  }
}