所以我对 JS/jQuery 相当陌生。最近发现了 enquire.js，因为我想加载不同的 JS 样式来影响我在不同屏幕宽度下的折叠标题。我有一个滚动事件监听器，监听是否滚动超过 250 执行，否则恢复正常。
JS在这里：
var header、banner、nav、headertxt、pagetop、yPos；
function yScroll() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
yPos = window.pageYOffset;
if (yPos > 250) {
header.style.height = "50px";
//banner.style.top = "50px";
//banner.style.height = "800px";
nav.style.top = "45%";
headertxt.style.top = "23%";
pagetop.style.top = "140px";
} else {
header.style.height = "100px";
//banner.style.top = "100px";
//banner.style.height = "800px";
nav.style.top = "75%";
headertxt.style.top = "32%";
pagetop.style.top = "107px";
}
}
window.addEventListener("scroll", yScroll);
发生的事情虽然是一个明显的主要问题，但我得到了预期的效果。JS 仅在我滚动页面后才执行。所以如果我调整大小什么都不会发生。我希望即时更改样式然后听我是否滚动然后使用上面的代码。我相信有一种更有效的方法可以做到这一点。仅凭我的知识和经验，我尝试了这个....
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
var header, banner, nav, headertxt, pagetop, yPos, iwidth;
function Resize() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
iwidth = window.innerWidth;
if (iwidth < 899) {
header.style.height = "75px";
nav.style.top = "72%";
headertxt.style.top = "32%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("onresize", Resize);
function yScroll() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
yPos = window.pageYOffset;
if (yPos > 250) {
header.style.height = "35px";
//banner.style.top = "50px";
//banner.style.height = "800px";
nav.style.top = "45%";
headertxt.style.top = "20%";
headertxt.style.fontSize = "17px";
pagetop.style.top = "140px";
} else {
header.style.height = "75px";
//banner.style.top = "100px";
//banner.style.height = "800px";
nav.style.top = "72%";
headertxt.style.top = "32%";
headertxt.style.fontSize = "21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("scroll", yScroll);
}
});
enquire.register("screen and (min-width: 900px)", {
match : function() {
var header, banner, nav, headertxt, pagetop, yPos, iwidth;
function Resize() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
iwidth = window.innerWidth;
if (iwidth > 899) {
header.style.height = "100px";
nav.style.top = "75%";
headertxt.style.top = "32%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("onresize", Resize);
function yScroll() {
header = document.getElementById("header");
banner = document.getElementById("banner");
nav = document.getElementById("nav");
headertxt = document.getElementById("headertxt");
pagetop = document.getElementById("pagetop");
yPos = window.pageYOffset;
if (yPos > 250) {
header.style.height = "50px";
//banner.style.top = "50px";
//banner.style.height = "800px";
nav.style.top = "45%";
headertxt.style.top = "23%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "140px";
} else {
header.style.height = "100px";
//banner.style.top = "100px";
//banner.style.height = "800px";
nav.style.top = "75%";
headertxt.style.top = "32%";
headertxt.style.fontSize ="21px";
pagetop.style.top = "107px";
}
}
window.addEventListener("scroll", yScroll);
}
});
如您所见，例如，当内部宽度小于 899 时，我尝试侦听调整大小并执行样式。调整大小功能似乎根本不起作用。当我调整窗口大小时，我的滚动功能仍然正常工作，没有任何反应。现在我希望在未来更改并添加到 style.height .top 等，因为这个项目仍处于相当早期的阶段。
我还想过只在我的 CSS 断点中编码样式，但滚动侦听器会覆盖 CSS？或者只是从我的滚动功能中取出 else，这样 CSS 将成为 else 部分而不是 JS？我真的只是在这里大声思考。
又还在学习。还要提一下，我在构建我的作品集并想展示 JS 技能时故意使用 JS，因为我的其他项目都没有太多可以展示的 JS。提前感谢您的任何指导。解决了