Zurücksetzen Ich habe den folgenden Code, die .nav-up und .nav-down basiert fügt/entfernt auf Ereignisse außer auf Bildschirmen < 768pxeine Funktion für reaktions
Skript
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
Scrollen<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; }
}
Wenn Sie jedoch vom Mobilgerät zur Bildschirmgröße (responsiv) wechseln, wird das Menü "hoch", als ob das Fenster gescrollt wurde. Ich will ‚Reset‘ die Funktion, so dass, wenn es Bildschirmgröße ist I bleibt ‚down‘
, das funktioniert nicht sicher genau wie, aber Problem gelöst! danke – user3550879
es ist, weil, wenn Fenster kleiner als 768 ist, das # s-nav die Klasse 'nav-down' nimmt, also, wenn Sie die Größe ändern, hat es immer noch diese Klasse, also geht es nicht hinauf! nicht sicher, ob es aber klar ist;) – shwarp