0

我需要在 matchMedia 查询中包装一个 addEvent 侦听器，但我尝试过的一切都行不通。

基本上，我正在尝试实现这样的结果，在移动设备（1080px 及以下）上，当用户向下滑动页面时，我网站上的顶栏向上滑出视图，然后当他们向上滑动时再次向下滑动回到视图中.

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

我已经根据用户在页面上的滚动位置实现了上下滑动行为，但我无法弄清楚如何将 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 + "%";
  }
4

0 回答 0