Los elementos fijos se utilizan principalmente para mantener algo que se muestra en la pantalla durante el desplazamiento. Por genial que sea, ¡también podemos ocultar elementos de la misma manera!
Aquí hay una (um) situación complicada típica:
Vea la posición del lápiz: pegajosa (CSS) de Preethi Sam (@rpsthecoder) en CodePen.
Elementos pegajosos (position: sticky;) son muy similares a los elementos fijos ( position: fixed;) en el sentido de que ambos mantienen su posición en la pantalla, incluso cuando el usuario se desplaza hacia arriba o hacia abajo en la página. ¿La diferencia? Un elemento fijo permanece confinado al contenedor principal en el que se encuentra. Compare el ejemplo fijo anterior con este que usa el mismo concepto usando un elemento fijo en su lugar:
Vea la posición del lápiz: pegajoso (CSS) por Programar Plus(@ css-tricks) en CodePen.
Digamos que queremos crear un efecto en el que los elementos se deslizan hacia adentro o hacia afuera en el desplazamiento, una especie de paralaje. Por ejemplo, un encabezado que se desliza hacia afuera y un pie de página que se desliza hacia adentro:
¿Bien adivina que? ¡Podemos hacer eso con elementos pegajosos!
Vea el efecto de deslizamiento de la pluma hacia adentro y hacia afuera usando “position: sticky” de Preethi Sam (@rpsthecoder) en CodePen.
¿Como hacemos eso? Me alegro de que lo hayas preguntado. Vamos a analizarlo.
Configuración HTML
Hay tres elementos adhesivos en nuestro ejemplo:
- El primero es el encabezado de la categoría que se desliza debajo del cuerpo del artículo una vez que llega a la parte superior de la pantalla.
- El segundo es el título del artículo y permanece visible en la parte superior de la pantalla, mientras que el cuerpo del contenido desaparece detrás de él en el desplazamiento (que es el comportamiento típico de los elementos adhesivos).
- El tercer elemento es un pie de página que se desliza fuera del artículo y se revela cuando el artículo se desplaza por encima de un cierto umbral.
Veamos cómo se hace. Aquí está el HTML con el que estamos trabajando … básicamente dos artículos:
<article>
<div class="category">Category Header</div>
<h1 class="title">Article 1 Title</h1>
<p>Body content would go here.</p>
<!-- More content -->
<div class="footer">
<p>Article 1 Footer</p>
</div>
</article>
<article>
<div class="category">Category Header</div>
<h1 class="title">Article 2 Title</h1>
<p>Body content would go here.</p>
<!-- More content -->
<div class="footer">
<p>Article 2 Footer</p>
</div>
</article>El CSS pegajoso
El .category, .title, y .footer los elementos obtendrán position:sticky; junto con una propiedad de ubicación que dice en qué parte de la pantalla comenzarán a “pegarse” cuando se desplacen.
.category,
.title,
.footer {
position: -webkit-sticky; /* Required for Safari */
position: sticky;
height: 50px;
}
.category {
top: 0;
}
.title {
top: 0;
}
.footer {
bottom: 100px;
z-index: -1;
}No estoy haciendo mucho con los elementos pegajosos, excepto estilizarlos. Ya están haciendo lo que deben hacer: pegarse a la pantalla. Todo lo que queda es crear una portada y algo de espacio para que los elementos entren y salgan a medida que avanza la página.
Probablemente hay muchas formas en que podemos crear una portada en el artículo que los elementos adhesivos pueden pasar y esconderse debajo de una página. background-image.
article {
background-image: linear-gradient(
to bottom,
transparent 50px,
#F5A623 50px,
#F5A623 calc(100% - 50px),
transparent 0
);
margin: auto auto 50px auto;
}El degradado lineal de fondo se aplica al artículo y se ejecuta de arriba a abajo, comenzando con 50px de transparencia y un cambio de color con una parada brusca en 50px. El calc ¿cosas? Así le digo al color que siga pero se vaya 50px en el fondo. Luego volvemos a ser transparentes. Eso significa que tenemos dos 50px rayas transparentes, una en la parte superior y otra en la parte inferior con alturas iguales que coinciden con las alturas del encabezado de la categoría y el pie de página.
El encabezado de la categoría y el pie de página del artículo son los elementos que se deslizan dentro y fuera del texto, por lo que sus alturas son las que determinan la longitud de las franjas transparentes en la parte superior e inferior del degradado.
La forma en que todo esto se combina es que tanto el encabezado de la categoría como el título del artículo se adhieren a la pantalla cuando sus partes superiores se alinean con la parte superior de la ventana gráfica. El título se apila en la parte superior del encabezado de la categoría y, cuando comienza a pegarse en la parte superior de la ventana gráfica, oculta el encabezado de la categoría por completo.
En cuanto al pie de página, ya está atascado. 100px encima de la parte inferior de la pantalla (dentro del límite del artículo), pero no lo verá porque está detrás del contenido usando z-index:-1. Será visible una vez que pasemos el comienzo de la última franja transparente del fondo del artículo.
.footer {
bottom: 100px;
margin: 50px auto auto auto;
z-index: -1;
}Debido a que el encabezado de la categoría es solo contenido sin nada con qué ocultar más que el texto en sí, es una buena idea darle al último elemento adhesivo (el pie de página) un margen superior de 50px (para mantener las cosas iguales) para que no lo vea detrás del encabezado de la categoría mientras se desplaza.
¡Eso es!
Ahora, por supuesto, querrá hacer esto suyo y cambiarlo, como las dimensiones, la cantidad de elementos y el tipo de contenido. La clave es crear esas cubiertas que permitan que sus elementos adhesivos se escondan detrás y se revelen a medida que pasan, nuevamente, probablemente diferentes formas de hacerlo, pero elegí rayas transparentes en un degradado.
¿Qué, otro ejemplo? ¡Seguro!
Aquí hay otro ejemplo con desplazamiento horizontal (y un degradado horizontal), que podría ser ideal para aplicar este concepto a dispositivos móviles:
Vea el efecto de deslizamiento de entrada y salida de Pen Horizontal usando elementos adhesivos de Preethi Sam (@rpsthecoder) en CodePen.
¿Ves cómo la comida se revela cuando un artículo sale de la ventana gráfica y luego se oculta cuando pasa el siguiente artículo?
Mismo tipo de configuración HTML:
<article>
<div class="title">Article 1 Title</div>
<p>Article content goes here.</p>
<img class="image" src="https://css-tricks.com/path/to/revealed/image.png">
</article>
<article>
<div class="title">Article 2 Title</div>
<p>Article content goes here.</p>
<img class="image" src="https://css-tricks.com/path/to/revealed/image.png">
</article>Voy a mi solución de degradado lineal para crear las cubiertas, esta vez yendo de izquierda a derecha para tener en cuenta un desplazamiento horizontal:
article {
background-image: linear-gradient(
to right,
transparent 50px,
#F5A623 50px,
#F5A623 calc(100% - 50px),
transparent 0
);
}
.title,
.image {
position: sticky;
position: -webkit-sticky;
z-index: -1;
width: 50px;
}
.title {
left: 20px;
margin-right: 52px;
}
.image {
left: 150px;
}Observe nuevamente que vamos con las mismas dos franjas transparentes de 50px que antes, la única diferencia es que las estamos aplicando al ancho en lugar de al alto.
Ambos elementos adhesivos (el título y la imagen) se deslizarán debajo y a través del artículo. Entonces, para evitar superponerlos durante el desplazamiento, el título obtiene un margen derecho que es igual al ancho de la imagen, que es 50 px (más 2 px adicionales para una línea más limpia en Chrome).
Esto es lo que sucede: a medida que nos desplazamos horizontalmente, el título se pega a 20 px del borde izquierdo de la pantalla y la imagen a 150 px del mismo. Porque ambos tienen z-index: -1;, desaparecerán debajo del artículo (bueno, el degradado de fondo); se ocultan a medida que pasan por el color sólido del degradado y se revelan mediante las franjas transparentes.
OK, un ejemplo más
Antes de terminar, permítanme mostrarles un ejemplo más que inspiró esta publicación. Es un pie de página del sitio que se revela en el desplazamiento. Vi este diseño por primera vez en el sitio web de Ryan Seddon hace mucho tiempo.
Este diseño generalmente se hace usando un pie de página “fijo” al que se le da algo de espacio al final de la página para salir, usando un margen. Pensé que si los elementos fijos pueden hacer eso para toda la página, entonces tal vez los elementos fijos puedan hacer algo similar para los elementos individuales, y de ahí lo que se me ocurrió hasta ahora.
En consecuencia, podemos lograr este mismo efecto utilizando las técnicas pegajosas que hemos cubierto hasta ahora.
Primero, nuestro HTML:
<main>
<h1>Site Title</h1>
<p>Site content</p>
</main>
<footer>
Site Footer
</footer>html {
background-color: #fff;
}
body {
background-image: linear-gradient(
to top,
transparent 60px,
#fff 60px,
#fff 0
);
}
footer {
position: -webkit-sticky;
position: sticky;
bottom: 0;
height: 50px;
padding: 5px 0;
z-index: -1;
}Vea el deslizamiento del pie de página de la página del lápiz usando “position: sticky” de Preethi Sam (@rpsthecoder) en CodePen.
Un pie de página adhesivo y un degradado de fondo en el cuerpo hacen el truco.