Foros del Web » Programando para Internet » Jquery »

Parpadeo del Header al hacer Scroll

Estas en el tema de Parpadeo del Header al hacer Scroll en el foro de Jquery en Foros del Web. Hola que tal. Veréis tengo un problema bastante simple de comprender pero del que no encuentro solución. Bueno, el caso es que estoy trabajando en ...
  #1 (permalink)  
Antiguo 28/08/2014, 10:54
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 9 años, 10 meses
Puntos: 0
Parpadeo del Header al hacer Scroll

Hola que tal.
Veréis tengo un problema bastante simple de comprender pero del que no encuentro solución.
Bueno, el caso es que estoy trabajando en una web que tiene una sección donde va el contenido, dentro de esta etiqueta <section> hay un header que ocupa todo el ancho del padre, a su vez el padre esta separado de los bordes del cuerpo con un margen del 3% en derecha e izquierda. Además por encima de esta sección hay un div que ocupa el 100% del ancho y los 200 primeros pixeles del cuerpo, es decir, como un banner que hace de cabecera con logo.

Ese es el diseño, la funcionalidad que necesito es que cuando el header que hay dentro de la sección llegue al top de la página este se convierta en una cabecera siempre visible y que ocupe todo el ancho del cuerpo. Esto lo hice de la siguiente manera.

Código:
$(document).scroll(function () {
        if($(document).scrollTop() >= 200) {
            $("header").addClass("sticky_header");
        } else {
           $("header").removeClass("sticky_header");
        }
    });
Lo que hago aquí es que cuando se haga scroll se compruebe mediante una condición si el scroll vertical es igual o mayor a 200px, la separacion entre el banner y la sección antes mencionada. Si es así se añade la clase "sticky_header" al header.
Los estilos de header y de la clase son los siguientes:
Código:
header {
    width: 100%;
    height: 70px;
    background-color: #fafafa;
}

.sticky_header {
    position:fixed;
    top: 0;
    left: 0;
}
Hasta aqui todo funciona correctamente. Pero mi problema viene porque quise añadir una animación fadeIn cada vez que se añade la clase "sticky_header".

Modifique el JS de esta forma:
Código:
$(document).scroll(function () {
        if($(document).scrollTop() >= 200) {
            $("header").fadeOut();
            $("header").addClass("sticky_header").fadeIn();
        } else {
           $("header").removeClass("sticky_header")
        }
    });
El funcionamiento es el mismo que antes, solo que ahora lo que hace es desaparecer el header con fadeOut, añadir la clase que ahora tiene un "display:none" y hacer un fadeIn.
Esto funciona bien, la clase se añade con la transición, el problema es que si se sigue haciendo Scroll esta comienza a parpadear, es decir a desaparecer y aparecer. Ya que cuando ocurre el Scroll y comprueba la condición esta se sigue cumpliendo y vuelve a ejecutar el codigo.

Si se hace Scroll con la rueda del ratón el header parpadea el numero de veces que muevas la rueda, si lo haces con el Scrollbar este parpadea mas veces.

¿Vosotros veis alguna solución o alguna otra forma de hacerlo, mi planteamiento es incorrecto?

Gracias y un saludo.

Etiquetas: header, parpadeo, scroll
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 15:14.