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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *