HTML
01 | <nav>xxxxxx</nav> |
Javascript
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ////////////////////////////////////////////// //===> Ocultar el menú en scrolldownvar 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
