Hi,
entweder ich steh aufm Schalu oder ich bin zu blöd.
ich bekomm es nicht hin das der ScrollEvent Code aufm größer Bildschirm 992px removed wird inklusive der Klassen.
Was ich auch versucht habe das mobile.matches im Event abzufragen um mir das resize zu sparen aber das wollte auch nicht so wirklich und ich wußte dann auch nicht wie ich den Event wieder vernüünftig entferne.
https://codepen.io/janstieler-the-bashful/pen/QWJvPKx
Das ist nicht perfekt von den Größen aber man sieht das nachm klein und wieder großziehen des Bidlschirmes das scrollevent noch aktiv ist.
entweder ich steh aufm Schalu oder ich bin zu blöd.
ich bekomm es nicht hin das der ScrollEvent Code aufm größer Bildschirm 992px removed wird inklusive der Klassen.
Was ich auch versucht habe das mobile.matches im Event abzufragen um mir das resize zu sparen aber das wollte auch nicht so wirklich und ich wußte dann auch nicht wie ich den Event wieder vernüünftig entferne.
https://codepen.io/janstieler-the-bashful/pen/QWJvPKx
Das ist nicht perfekt von den Größen aber man sieht das nachm klein und wieder großziehen des Bidlschirmes das scrollevent noch aktiv ist.
Javascript:
function headerLogoScroll() {
const logoHeader = document.getElementById('headerLogo');
const mobile = window.matchMedia('(max-width:992px)');
let scrollListenerAdded = false;
let lastScrollTop = 0;
let logoHeight = logoHeader.offsetHeight;
let logoTop = logoHeader.offsetTop;
let logoScrollPosHide = logoTop + (logoHeight - (logoHeight / 3));
let logoBottomPos = logoTop + logoHeight;
function scrollHandler() {
let st = window.scrollY || document.documentElement.scrollTop;
if (st > lastScrollTop) {
console.log('downscroll');
if (st < logoBottomPos) {
logoHeader.classList.remove('sticky-logo');
logoHeader.classList.remove('sticky-logo__animated');
logoHeader.classList.remove('sticky-logo__show');
}
if (st > logoScrollPosHide) {
logoHeader.classList.remove('sticky-logo__show');
logoHeader.classList.add('sticky-logo');
}
} else if (st < lastScrollTop) {
console.log('upscroll');
if (st < logoScrollPosHide && st > lastScrollTop) {
logoHeader.classList.remove('sticky-logo');
logoHeader.classList.remove('sticky-logo__animated');
logoHeader.classList.remove('sticky-logo__show');
}
if (st > logoScrollPosHide) {
logoHeader.classList.remove('sticky-logo');
logoHeader.classList.add('sticky-logo__animated');
logoHeader.classList.add('sticky-logo__show');
}
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}
if (mobile.matches) {
if (!scrollListenerAdded) {
window.addEventListener('scroll', scrollHandler, false);
scrollListenerAdded = true;
}
} else {
console.log('notMobile');
if (scrollListenerAdded) {
window.removeEventListener('scroll', scrollHandler, false);
scrollListenerAdded = false;
}
logoHeader.classList.remove('sticky-logo');
logoHeader.classList.remove('sticky-logo__show');
logoHeader.classList.remove('sticky-logo__animated');
}
}
document.addEventListener('DOMContentLoaded', (event) => {
headerLogoScroll();
});
window.addEventListener('resize', (event) => {
headerLogoScroll();
});