Ocultar menú en scrolldown de forma suave
HTML
<nav>xxxxxx</nav>
Javascript
//////////////////////////////////////////////
//===> Ocultar el menú en scrolldown
var confScrolldown = {
//Número de scroll en pixels donde se comienza a ocultar el menú
offsetOcultar: 20,
};
var $navbarSuperior = $("nav");
var offsetActualParaOcultar = 0;
var prevScrollpos = $(window).scrollTop();
var alturaMenuNav = $navbarSuperior.outerHeight();
$(window).scroll(function() {
var currentScrollPos = $(window).scrollTop();
if (prevScrollpos > currentScrollPos) {
//$navbarSuperior.css("top",'0'); //<=sin animación
$navbarSuperior.stop().animate({ top: 0 }, 100);
offsetActualParaOcultar = 0;
} else {
//$navbarSuperior.css("top",'-'+alturaMenuNav+'px'); //<=sin animación
offsetActualParaOcultar++;
if(offsetActualParaOcultar>=confScrolldown.offsetOcultar)
{
//Sólo realizará la animación si ha scrolleado los píxeles indicados en confScrolldown.offsetOcultar
$navbarSuperior.stop().animate({ top: -alturaMenuNav }, 800);
}
}
prevScrollpos = currentScrollPos;
});
Referencias:
https://codepen.io/JTParrett/pen/CAglw
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll