Poniéndose elegante con la posición: pegajoso;

Mike Solomon trabajó en una elegante publicación con pergaminos para Esquire y escribió un blog sobre ello . Tiene GIF de cada paso en el camino para descubrir no solo position: sticky;sino también el uso de márgenes negativos, divs envolventes, fondos e incluso una pizca de medición de JavaScript para hacerlo todo bien.

Lo que no tiene es ninguna demostración aislada del efecto. Pensé que le daría una oportunidad a la ingeniería inversa.

Aquí está el mío, al que llamaré “Imagen adhesiva con figura sobresaliente”:

Esa demostración está llena de números mágicos para hacer que la salida produzca el efecto de “esconderse detrás”. Si eso no es importante, esta versión es mucho más limpia .

Probablemente no como Mike lo tenía, pero no estoy al tanto de los detalles exactos que buscaba en la publicación del blog. Su GIF final es:

Aquí hay un video rápido que grabaré a partir del artículo en sí en caso de que te inspire a encontrar un enfoque diferente:

¡Eh! De hecho, hablé con Mike sobre todo esto y él dice que la conclusión principal de todo esto (que pasó por alto, ¡lo siento, Mike!) es que “lo adhesivo no es solo para la parte superior de la pantalla”. Observe en el producto final cómo el elemento adhesivo se vuelve adhesivo mucho antes de convertirse en el elemento en la parte superior de la pantalla. Es más como el centro de la pantalla. Para eso topestá el valor position: sticky;, pero en esta demostración donde el objetivo es deslizarlo dentro y fuera de una imagen, se vuelve complicado.

Después de algunas bifurcaciones de ida y vuelta…

Enlace directo →