Sticky menu usnadňuje návštěvníkům navigaci, snadno se dostanou k menu, i když jsou ve spodní části stránky. Zejména na mobilu ale sticky menu zabírá vzácný prostor, který je potřeba pro zobrazení informací. Řešením je menu schovat při pohybu dolů a zobrazit při pohybu nahoru. Pokud se návštěvník pohybuje směrem nahoru, je nasnadě, že se snaží dostat k navigačnímu menu, proto mu ho při pohybu nahoru zobrazíme.
Celý element, kterých chceme skrývat a zobrazovat musí mít ID nastavené na ‘stickyheaders’.
Na web je potřeba vložit ten to ovládací Javascript:
<script>
document.addEventListener('DOMContentLoaded', function () {
jQuery(function ($) {
var mywindow = $(window);
var mypos = mywindow.scrollTop();
let scrolling = false;
window.addEventListener('scroll', function () {
scrolling = true;
});
setInterval(() => {
if (scrolling) {
scrolling = false;
if (mypos > 40) {
if (mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}
}, 300);
});
});
</script>
a tento zápis CSS:
#stickyheaders {
transition : transform 0.34s ease;
}
.headerup {
transform: translateY(-90px); /*tady upravte hodnotu podle výšky vašeho menu*/
}