A következő kóddal rendelkezik, amely hozzáadja/eltávolítja a .nav-up és .nav-down fájlokat a görgetési események alapján, kivéve a ‹768 képpontos képernyőkön
forgatókönyv
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
}
html
<nav id="s-nav" class="nav-down"> .... </div>
css
#s-nav { position: fixed; }
#s-nav.nav-up { top: -75px; }
@media screen and (max-width: 768px) {
#s-nav.nav-up { top: 0; }
}
Amikor azonban mobilról képernyőméretre (reszponzív) képernyőméretre váltunk, a menü „felfelé megy”, mintha görgetnénk az ablakot. Szeretném "visszaállítani" a funkciót, hogy amikor a képernyő mérete csökken, akkor "lefelé" maradjak
