如何在 matchMedia 查询中包装 addEventListener？

问题描述

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

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

但在任何大于 1080 像素的视口上，我希望它保持固定在视口的顶部。

我已经根据用户在页面上的滚动位置实现了上下滑动行为，但我无法弄清楚如何将 matchMedia 附加到 hideNav 以便其上下滑动行为基于视口为 1080px 或少。

我将不胜感激任何帮助。

非常感谢。

马克

这是我正在使用的代码，它只是我需要在 matchMedia 查询中包装的有关 hideNav 的代码块，而不影响其他 addEventListeners：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）