Foros del Web » Programando para Internet » Javascript »

Problema header + scroll + header

Estas en el tema de Problema header + scroll + header en el foro de Javascript en Foros del Web. Hola. Tengo una función que muestra el header (logotipo + navegación + telefono) cuando se sube con el scroll y desaparece cuando se baja. No ...
  #1 (permalink)  
Antiguo 11/09/2019, 09:05
 
Fecha de Ingreso: noviembre-2005
Mensajes: 870
Antigüedad: 13 años, 10 meses
Puntos: 8
Problema header + scroll + header

Hola.

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:
<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>
Funciona perfectamente y sin problemas.

El problema es que en una sección tengo un subidor con jquery tan común como podéis ver:

Código:
(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)
También funciona perfectamente.

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.



La zona horaria es GMT -6. Ahora son las 04:55.