如何解决如何在 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 举报,一经查实,本站将立刻删除。