Buenos días,
he realizado un menú que al hacer scrool hacia abajo, se queda fijo arriba.
Funciona también en móvil con la hamburguesa, pero hay un problema y es que el menú tiene submenus, y si estoy con móvil, al hacer scroll hacia abajo, si le doy a la hamburguesa para que aparezcan los submenús, se me va arriba la página y el submenú se me queda donde me había quedado en el scroll, no sé si me explico.
He realizado esto (es con shopify pero la parte de javascript y html es la misma):
Código:
<header id="header" class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
<style>
.header-fijo{
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// check where the shoppingcart-div is
var offset = $('#header').offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
// check the visible top of the browser
if (offset.top<scrollTop-60) {
$('#header').addClass('header-fijo');
} else {
$('#header').removeClass('header-fijo');
}
});
});
</script>
No sé si se puede poner la página, si no se puede la borro, pero es para que veais mejor lo que pasa al hacer scroll en movil:
https://www.hairstocks.com/
Como comento, lo que he hecho funciona y en escritorio los submenu se quedan arriba, pero con movil, al usar la hamburguesa, pues no.
A ver si podéis echarme una mano.
Gracias y un saludo