JS не обновляется на точках останова enquire.js
Так что я довольно новичок в JS/jQuery. Недавно нашел enquire.js, так как я хотел загрузить разные стили JS, чтобы они влияли на мой сворачивающийся заголовок при разной ширине экрана. У меня есть прослушиватель события прокрутки, прослушивающий, если прокрутить после 250 выполнится, иначе вернусь к нормальному состоянию.
JS здесь:
заголовок var, баннер, навигация, 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, которое я могу показать. Заранее спасибо за любые рекомендации.РЕШИТЬ