Rollo de paralaje con cabezal adhesivo

Gracias de antemano por cualquier sugerencia. Intento crear un sitio que use un elemento de desplazamiento de paralaje básico. Básicamente, el encabezado está posicionado al 60% desde la parte superior de la página. A medida que el usuario se desplaza, el contenido debajo del encabezado alcanza el encabezado y fluye por debajo.

Puedo lograr que todo esto funcione a la perfección, pero también me gustaría que el encabezado se adhiera a la parte superior de la página cuando llega hasta allí. Lo conseguí para el tipo de trabajo, pero cuando el encabezado está atascado, es muy llamativo / nervioso. He visto a otras personas con problemas similares, y parecen derivarse de cambiar la posición del encabezado de estático a fijo, pero en mi diseño, el encabezado siempre está fijo, por lo que estoy un poco perplejo. Tal vez el posicionamiento que estoy usando parezca un poco extraño, pero después de mucha experimentación, esto es lo más cercano que pude lograrlo.

Aquí hay un JSFiddle y el código:

http://jsfiddle.net/kromoser/Lq7C6/11/

JQuery:

$(window).scroll(function() { var scrolled = $(window).scrollTop(); if (scrolled > $('#header').offset().top) { $('#header').css('top','-60%'); } else { $('#header').css('top',(0-(scrolled*0.6))+'px'); } }); 

CSS:

 body { margin: 0; padding: 0; width: 100%; height: 100%; } #header { position: fixed; top: 0; margin-top: 60%; z-index: 3; background: #FFF; width: 100%; } #content { min-height: 100%; position: relative; top: 100%; } 

HTML:

  
Content goes here

¡Gracias por cualquier ayuda!

es causado porque su función de desplazamiento aplica el CSS al encabezado cada vez que se lo llama, que es cada vez que el usuario se desplaza. Cuando se aplica, se salta constantemente entre los 2 valores en su instrucción if.

Creo que una mejor forma de ejecutar esto sería aplicando una clase al encabezado una vez que esté en la posición superior y estilizando esa clase en css. Entonces, incluso si addClass () se aplica varias veces, el css no hará que salte.

 if( scrolled > $('#header').offset().top){ $('#header').addClass('top'); } .top { top: 60px; // or whatever amount you want it to stay when it is done moving } 

Intenté esto y creo que esto debería ser algo para ti.

Cambie su encabezado por position:absolute;

En el documento. Listo, mantenga la posición inicial de su encabezado en Var (para detectar cuándo el encabezado debe mantener su posición mientras se desplaza hacia arriba):

 var initialPos = $('#header').offset().top; 

Y agregue este siguiente jquery para detectar la posición de desplazamiento:

 if( scrolled > initialPos){ $('#header').css({ position:"fixed", top:'0px' }); }else{ $('#header').css({ position:"absolute", top:initialPos+"px" }); } 

VIOLÍN

¡El plugin “Scrollotwig” maneja esto bastante bien! Mire las secciones “Pin it” y “Parallax” aquí: http://johnpolacek.github.io/scrollotwig/ . Personalmente, cuando bash crear una transición sin problemas, he encontrado la mejor suerte usando estos complementos en lugar de tratar de escribirlos yo mismo.

Otra cosa para investigar es Stellar.js. Extremadamente fácil de usar, y si puede usar transiciones de posición de fondo en lugar de transiciones de elementos, es mucho más suave y menos nervioso. Stellar.js y Scrollotwig trabajan juntos maravillosamente.

http://markdalgleish.com/projects/stellar.js/