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:
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.$(document).scroll(function () { if($(document).scrollTop() >= 200) { $("header").addClass("sticky_header"); } else { $("header").removeClass("sticky_header"); } });
Los estilos de header y de la clase son los siguientes:
Código:
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".header { width: 100%; height: 70px; background-color: #fafafa; } .sticky_header { position:fixed; top: 0; left: 0; }
Modifique el JS de esta forma:
Código:
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.$(document).scroll(function () { if($(document).scrollTop() >= 200) { $("header").fadeOut(); $("header").addClass("sticky_header").fadeIn(); } else { $("header").removeClass("sticky_header") } });
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.