Uso un menú sticky en mi web: www.doblem.xyz
.
En la versión móvil, quiero que una vez que se haga click en el menú movil, y luego, en el menú, se pinche en una sección, el menú sticky se oculte.
<header class="row" id="myHeader">
<div id="logo" class="col-lg-3 col-md-3 col-sm-4 col-xs-12 ">
<a href="../index.php"><img src="../img/logo_blanco.png" class="img-responsive"></a>
</div>
<!-- La caja "menuMovil" solo aparece en resoluciones de moviles
(Collapsing The Navigation Bar BS-->
<div id="menuMovil" class="navbar-header navbar-inverse">
<!--pull-left: forzamos a colocarlo a la izquierda
data-toogle: collapse: Generar acción colapsable
data-target: clase a la que afecta el "data-toggle"
-->
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#menu" >
<!-- Las tres lineas del botón-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Debemos indicar que esta caja es colapsable y de que se trata de una barra de navegación colapsable
-->
<nav id="menu" class="col-lg-9 col-md-9 col-sm-8 col-xs-12 collapse navbar-collapse pull-right">
<ul class="nav navbar-nav ">
<li class="active"><a href="../index.php">Volver</a></li>
</ul>
</nav>
</header>
El código del sticky js:
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}