Tengo una función que muestra el header (logotipo + navegación + telefono) cuando se sube con el scroll y desaparece cuando se baja.
No tiene nada de especial, y se desarrolla de esta forma:
Código:
Funciona perfectamente y sin problemas. <script defer> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("inicial").style.top = "0"; document.getElementById("inicial").style.backgroundColor = "rgba(1, 56, 106, 0.9)"; } else { document.getElementById("inicial").style.top = "-100%"; } prevScrollpos = currentScrollPos; if (document.body.scrollTop > 180 || document.documentElement.scrollTop > 180) { document.getElementById("inicial").style.backgroundColor = "rgba(1, 56, 106, 0.9)"; } else { document.getElementById("inicial").setAttribute("style", "background-color: rgba(1, 56, 106, 0); transition: 1s"); } } </script>
El problema es que en una sección tengo un subidor con jquery tan común como podéis ver:
Código:
También funciona perfectamente.(function($){ var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).attr("href"); }else{ var target = location.hash; } $('html,body').animate( { scrollTop: $(target).offset().top },1000,function() { location.hash = target; }); } $('html, body').hide() $(document).ready(function() { $('a[href^=#]').bind("click", jump); if (location.hash){ setTimeout(function(){ $('html, body').scrollTop(0).show() jump() }, 0); }else{ $('html, body').show() } }); })(jQuery)
El problema es que el subidor no lleva al usuario hasta el header sino hasta un índice que está unos 2000 píxeles más abajo, y que tiene un título y un párrafo de introducción.
Cuando pulsas el subidor, te lleva hasta el ancla, pero entonces aparece el header (de 200px de alto), que tapa el título y párrafo del índice. El problema es peor en los móviles.
¿Hay alguna forma de evitar que se apliquen los estilos al header SOLO cuando se usa el subidor?
Gracias.