A la hora de diseñar estilos basados en el scroll, existe una propiedad o forma a través de CSS. Hablamos de la propiedad scroll-state y se establece con la regla @container.
La propiedad scroll-state te permitirá establecer que la página se comporte de una forma determinada según el scroll que se realice. De esta forma, tendrás el control de lo que se muestra en pantalla según si te mueves hacia abajo o hacia arriba a lo largo de la página. Y lo mejor es que todo se puede hacer directamente en CSS.
A continuación, uno de los profesores de nuestro bootcamp, Sergio Jiménez, explica un ejemplo en el siguiente vídeo para que puedas ver paso a paso, cómo se lleva a cabo.
Aceptar el consentimiento para ver esto
En el ejemplo que explica Sergio se muestra un banner superior, un header con un menú y texto para poder tener scroll.
Gracias al siguiente código, se consigue que el header quede fijo en la pantalla una vez que llega arriba:
.header-container {
position: sticky;
top: 0;
nav {
display: flex;
align-items: center;
column-gap: 2rem;
background-color: darkseagreen;
padding: 1rem;
a {
color: white;
text-decoration: none;
&:nth-child(2) {
margin-inline-start: auto;
}
}
}
}
Lo que se pretende ahora es poder dar estilos a ese header para que cambie en función del scroll. Con el siguiente código, se permite darle un estilo con una sombra y un poco de opacidad una vez el header se ha quedado fijo en la parte superior de la pantalla:
.header-container {
position: sticky;
top: 0;
/* Scroll state */
@supports (container-type: scroll-state) {
/* Crea un contenedor de tipo scroll-state */
/* Opcionalmente le podemos dar un nombre container-name */
container-type: scroll-state;
/* Los estilos se va a aplicar cuando quede fijado arriba */
@container scroll-state(stuck: top) {
header {
transition: box-shadow 0.5s ease;
box-shadow:
rgb(0 0 0 / 60%) 0 12px 28px,
rgb(0 0 0 / 10%) 0 2px 4px,
rgb(255 255 255 / 5%) 0 0 0 1px inset;
nav {
background-color: rgba(143, 188, 143, 0.9);
backdrop-filter: blur(5px);
}
}
}
}
nav {
display: flex;
align-items: center;
column-gap: 2rem;
background-color: darkseagreen;
padding: 1rem;
a {
color: white;
text-decoration: none;
&:nth-child(2) {
margin-inline-start: auto;
}
}
}
}
Si quieres replicar el ejemplo exacto que ilustra Sergio en el vídeo, puedes encontrarlo en nuestro repositorio de GitHub: scroll-state-CSS.
Además, puedes ver más ejemplos de las opciones que ofrece esta propiedad de CSS en la página de Chrome for Developers: scroll-state() de CSS.
Finalmente, no olvides que si quieres saber más sobre CSS, así como de otras tecnologías que influyen en el desarrollo web y el desarrollo de software, apúntate a nuestro Bootcamp Full Stack Web Developer e inicia tu carrera en el mundo de la programación.
