javascript - scrolling - Obtener un encabezado fijo para "empujar hacia arriba", como en la aplicación de iPhone de Instagram con CSS y jQuery

position fixed scroll (6)

En primer lugar, gracias a @Chris Spittles por su excelente respuesta.

Creé una versión modificada que elimina la necesidad de ajustar cada elemento adhesivo, ya que simplemente cambia su posición relativa en lugar de usar un posicionamiento fijo.

El css se simplifica a:

.followMeBar { background: #999; padding: 10px 20px; position: relative; z-index: 1; color: #fff; } /* For aesthetics only */ body { margin: 0; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }

http://plnkr.co/edit/wk3h40LfBdN1UFtDLZgY?p=preview

Y aquí hay otro ejemplo que muestra cómo puede tener un desplazamiento cuando usa un encabezado fijo:

http://plnkr.co/edit/8YBqdCIKruVKYRXbZnCp?p=preview

La aplicación de Instagram tiene un bonito encabezado adhesivo que empuja a la actual en lugar de la nueva. Encontré un excelente tutorial sobre cómo hacer esto de forma nativa para Android, pero estoy buscando hacerlo con JavaScript y CSS.

Logré que mi cabecera cambiara por una nueva, pero parece que no puedo encontrar la manera de imitar la forma en que lo hace Instagram. Cualquier ayuda es muy apreciada.

* Editar: Pude hacer que el encabezado se adhiriera a la parte superior de la página cuando se desplazaba usando waypoints como Cj en los comentarios señalados. ( enlace a los puntos de referencia ). El principal problema que estoy teniendo es obtener el efecto de "empuje hacia arriba" que instagram usa en su aplicación móvil para iPhone. Me gustaría vincular a un ejemplo, pero nunca lo había visto antes. *

* * Editar 2: Usando partes del codepen que @Chris me proporcionó pude hacer que los encabezados se pegaran. Luego agregué un efecto .slideUp. Mi problema ahora es conseguir que el efecto .slideUp solo suceda cuando se alcanza el siguiente encabezado. En este momento, el efecto se activa en el desplazamiento.

Aquí está el código:

}) ();

Estaba teniendo problemas para obtener la respuesta de Chris para trabajar con precisión para mí, ya que todos los elementos estaban dentro de un div relativamente posicionado (con un encabezado encima de todo, fuera del div relativo); la respuesta a esto es simplemente almacenar el .offset () .top del div contenedor relativo en una var y restarlo del .css (''top'', value ) en la secuencia de comandos. Al igual que en la versión de chris, el valor superior está saliendo de la parte superior del documento, que funciona bien. Cuando agregas el div relativo, ahora Top está presionando desde la parte superior de ese, por lo que cualquier espacio sobre el div relativo está incluido en el valor, que es algo que no querrías. Espero que esto ayude a alguien más. James

Esto no siempre funciona bien si hay contenido sobre el div con los encabezados $thisSticky.css(''transform'', ''translateY('' + $newPosition+ ''px)''); : $thisSticky.css(''transform'', ''translateY('' + $newPosition+ ''px)'');

Pero esta línea hace el truco //could just as easily use top instead of transform $thisSticky.css(''top'', $newPosition+ ''px'');

No hay una respuesta rápida o fácil a esto, pero con un poco de cajoling creativo podemos emular la misma funcionalidad.

Lo que necesitamos es una serie de elementos que podamos identificar, buclear y luego configurar para que cuando lleguemos a su posición en la página, el elemento anterior se levante y el nuevo elemento se fije. Tendremos que recuperar la posición inicial del elemento utilizando el método offset().top jQuery y almacenarlo en una etiqueta de data para que podamos consultarlo más tarde. Luego, el resto se calculará a medida que avanzamos.

Esto debería funcionar:

.followMeBar { background: #999; padding: 10px 20px; position: relative; z-index: 1; color: #fff; } .followMeBar.fixed { position: fixed; top: 0; width: 100%; box-sizing: border-box; z-index: 0; } .followMeBar.fixed.absolute { position: absolute; } /* For aesthetics only */ body { margin: 0; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }

Aquí está la versión solo CSS:

Antes de decir "¡¿Qué? ¡Acabo de pasar por todo eso cuando hay una versión única de CSS!" Solo funciona en un par de navegadores. Prueba esto en Firefox por ejemplo:

.sticky { position: -webkit-sticky; position: -moz-sticky; position: -o-sticky; position: -ms-sticky; position: sticky; top: 0; left: 0; right: 0; display: block; z-index: 1; background: #999; color: #fff; padding: 10px 20px; } /* For aesthetics only */ body { margin: 0; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }

http://caniuse.com/#feat=css-sticky

Probé las soluciones proporcionadas anteriormente, pero ninguna de ellas funcionaba perfectamente sin errores (sobre todo errores en el desplazamiento y compatibilidad con el navegador). Acabo de encontrar este https://github.com/sarahdayan/feedify y está funcionando bien para mí.

Una versión básica de la solución:

CSS

.sectionWrapper{ background-color: #1E1E1E; padding: 10px 20px; color: #FF7B05; width: 100% height: 45px; min-height: 45px; margin-top: 30px; position: relative; z-index: 10; } .sectionHeader{ } .sectionEmbed { } .sectionFixed { background-color: #1E1E1E; padding: 10px 20px; color: #FF7B05; width: 100%; height: 45px; position: fixed; top: 0; left: 0; margin: 0; }

HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sectionWrapper sectionEmbed"> <div class="sectionHeader">Headers here</div> </div>

JQuery

//check doc is ready $(function() { $(window).on("scroll.sectionWrapper", function() { stickSections(); }); }); //function stickSection function stickSections() { //detach the listener $(window).off("scroll.sectionWrapper"); $scrollPos = $(window).scrollTop(); $currentSticky = null; $(''.sectionWrapper'').each(function(){ $(this).children().removeClass(''sectionFixed''); if($scrollPos >= ($(this).offset().top - ($(this).height() - $(this).children().height() - 6)) ){ $currentSticky = $(this); } else $(this).children().addClass(''sectionEmbed''); }); //apply the fixed class to our scrollPos match if($currentSticky) $currentSticky.children().addClass(''sectionFixed''); //reattach the listener $(window).on("scroll.sectionWrapper", function() { stickSections(); }); }

EJEMPLO

https://codepen.io/ZombiesByte/pen/EyYwVO

Que te diviertas :)