Estoy tratando de hacer que mi encabezado desaparezca cuando me desplazo hacia abajo y solo vuelva a aparecer cuando me desplazo hacia arriba. No puedo hacer que funcione: http://jsfiddle.net/mxj562qt/
¿Alguna idea de dónde me estoy equivocando?
HTML:
<div id="header" class="custom-header"> This is your menu. </div> <main> This is your body. </main> <footer> This is your footer. </footer>JavaScript:
// Hide Header on on scroll down var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $("#header").outerHeight(); $(window).scroll(function(event){ didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make sure they scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) return; // If they scrolled down and are past the navbar, add class .nav-up. // This is necessary so you never see what is "behind" the navbar. if (st > lastScrollTop && st > navbarHeight){ // Scroll Down $("#header").addClass('nav-up'); } else { // Scroll Up if(st + $(window).height() < $(document).height()) { $("#header").removeClass('nav-up'); } } lastScrollTop = st; }CSS:
body { padding-top: 40px; } #header { background: #f5b335; height: 50px; position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; } .nav-up { top: -50px; } main { height: 2000px; } footer { background: #ddd;} * { color: transparent}Parece que la clase CSS no se agrega, pero no estoy seguro de por qué. ¿Estoy haciendo referencia al Div de manera incorrecta?
Entonces, puedo ver que el problema se deriva de este fragmento de código...
// Scroll Up if(st + $(window).height() < $(document).height()) { $("#header").removeClass('nav-up'); }En mis pruebas, la altura del documento siempre fue > que la altura de la ventana st +.
Hice esto ...
// Scroll Up console.log('doc height: ', $(document).height()); console.log('st+window height: ', st + $(window).height()); if(st + $(window).height() < $(document).height()) { $("#header").removeClass('nav-up'); } // results from scrolling up + down // doc height: 2058 // st+window height: 313 // doc height: 2058 // st+window height: 280 // doc height: 2058 // st+window height 1614 // doc height: 2058 // st+window height: 1580Cambiar el JS antes mencionado a esto parece llevarlo a donde necesita estar.
$("#header").removeClass('nav-up');Entonces tu CSS necesitaba algo de trabajo...
Noté que su elemento top no se aplicaba debido a la prioridad del selector de CSS.
.nav-up { top: -50px !important; }El resultado: al desplazarse hacia abajo, la barra de navegación se oculta, al desplazarse hacia arriba, la barra de navegación se muestra.
Bifurqué tu código a continuación; http://jsfiddle.net/itsbjk/aw6qb2mr/16/
El problema aquí es con tu CSS. Ha especificado position:fixed; en su código y ese bit de CSS anula todo el JS que está escribiendo. Fijo obligará a que su encabezado sea visible sin importar lo que esté haciendo. En cambio, podrías probar esto en tu CSS:
body { padding-top: 40px; } #header { background: #f5b335; height: 50px; position: absolute; top: 0; transition: top 0.2s ease-in-out; width: 100%; } .nav-up { top: -50px; } main { height: 2000px; } footer { background: #ddd;} * { color: transparent} La propiedad absolute debería hacer que desaparezca al desplazarse. ¡Y también, su referencia a la etiqueta <div> no está mal!