Javascript 如何在matchMedia查询中包装addEventListener？

我需要在matchMedia查询中包装一个addEvent侦听器，但我尝试的所有方法都不起作用

基本上，我试图实现这样一个结果：在移动设备（1080px及以下）上，当用户向下滑动页面时，我网站上的顶部栏会滑出视图，然后当用户再次向上滑动时，顶部栏会滑回视图

但在任何大于1080px的视口中，我希望它在视口顶部保持固定

我已经实现了基于用户在页面上的滚动位置的上下滑动行为，但我不知道如何将matchMedia连接到hideNav，以便其上下滑动行为基于1080px或更低的视口

我将非常感谢任何帮助

非常感谢

马克

以下是我正在使用的代码，这只是我需要在matchMedia查询中包装的关于hideNav的代码块，而不会影响其他AddEventListener：

var prevScrollpos = window.pageYOffset;

window.addEventListener("scroll", hideNav);
window.addEventListener("scroll", hideBreadcrumbs);
window.addEventListener("scroll", slideSectionMenu);
window.addEventListener("scroll", hideMenu);
window.addEventListener("scroll", progressBar);

function hideBreadcrumbs() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementsByClassName("breadcrumb").style.top = "200px";
    }
    else {
            document.getElementsByClassName("breadcrumb").style.top = "-135px";
    }
    prevScrollpos = currentScrollPos;
}





function hideNav() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementById("topnav").style.top = "0px";
    }
    else {
            document.getElementById("topnav").style.top = "-135px";
    }
    prevScrollpos = currentScrollPos;
}





function hideMenu() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementsByClassName("menu-wrap").style.top = "0px";
    }
    else {
            document.getElementsByClassName("menu-wrap").style.top = "-75px";
    }
    prevScrollpos = currentScrollPos;
}


function slideSectionMenu() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementsByClassName("horizontal-scroll-menu").style.top = "75px";
    }
    else {
            document.getElementsByClassName("horizontal-scroll-menu").style.top = "0px";
    }
    prevScrollpos = currentScrollPos;
}


function progressBar() {

    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
  
    document.getElementById("myBar").style.width = scrolled + "%";
  }