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: 887
Antigüedad: 14 años, 8 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.

Etiquetas: funcion, header, scroll, var
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:58.