Indicar la posición de desplazamiento en una página con CSS

Desplazarse es algo que todos sabemos y hacemos en la web hasta el punto de que es una expectativa o quizás incluso un hábito, como lavarnos los dientes. Probablemente esa sea la razón por la que no pensamos demasiado en el diseño de la experiencia de desplazamiento: es una función básica bien conocida. De hecho, el dicho popular de “no hay pliegue” proviene de la idea de que la gente sabe cómo desplazarse y no existe una línea arbitraria por la que la gente no pase.

Las funciones basadas en desplazamiento tienden a implicar una mezcla personalizada de CSS y JavaScript. Esto se debe a que simplemente no hay tantas funciones nativas disponibles para hacerlo. Pero ¿qué pasaría si pudiéramos lograr algo que sólo use CSS?

Tomemos como ejemplo esta ingeniosa barra de desplazamiento horizontal con CSS. Quiero hacer algo similar, pero para indicar secciones desplazadas en lugar de capturar el desplazamiento continuo. En otras palabras, en lugar de aumentar la longitud del indicador durante el desplazamiento, solo quiero aumentar la longitud cuando se llega a una determinada sección de la página.

Como esto:

Este es mi plan: cada sección lleva un indicador que es indetectable hasta que llega a la parte superior de la pantalla. Ahí es donde se vuelve visible cambiando de color y se adhiere a la parte superior de la ventana gráfica.

Exactamente lo contrario debería suceder a la inversa: el indicador seguirá el movimiento cuando se desplace hacia arriba en la pantalla, camuflándose para pasar desapercibido una simple vista.

Hay dos partes clave en esto. La primera es que el indicador cambia de color cuando está cerca de la parte superior de la pantalla. La segunda es que el indicador permanece en la parte superior de la pantalla y baja solo cuando se desplaza hacia abajo en su sección.

El segundo es fácil de hacer: lo usamos position: sticky;en nuestros elementos. Cuando se desplaza una página, un elemento adhesivo se adhiere a una posición determinada en la pantalla dentro de su contenedor principal.

Eso nos lleva a cambiar de color. Dado que el fondo de un documento HTML es blanco de forma predeterminada, mantenga el blanco como base de color para la demostración. Esto significa que el indicador debe verse blanco cuando está sobre el color base y cambiar a otro color cuando está sobre la barra indicadora en la parte superior de la pantalla.

Aquí es donde entras en juego los modos de combinación de CSS. Nos dan muchísimas opciones para crear una variedad de amalgamas de colores. Voy a ir con el valor de superposición. Éste es de naturaleza bastante dinámica. No explicaré la combinación en profundidad (porque CSS-Tricks Alamanac ya hace un buen trabajo al respecto) pero teniendo en cuenta esta demostración, diré esto: cuando el color de fondo es blanco, el color de primer plano resultante es blanco; y cuando el fondo es de otro color, el color resultante es más oscuro o más claro, dependiendo del color con el que se mezcle.

Las paradas del indicador en la demostración son negras. Pero, debido a la mezcla, los vemos blancos porque están sobre un fondo blanco. Y cuando están sobre el elemento del contenedor del indicador, que es de un hermoso tono violeta, vemos un indicador violeta oscuro, porque estamos mezclando el negro del indicador con el violeta del contenedor del indicador.

Comenzando con el HTML:

div  strongSections Scrolled ↴/strong  !-- Indicator container --  div/div/div
!-- Indicator stop --div class=passageStops/div
!-- First Section --div  !-- Content --/div
!-- Another indicator stop --div/div
!-- Second Section --div  !-- Content --/div
!-- Another indicator stop --div/div
!-- Third Section --div  !-- Content --/div

Bastante sencillo, ¿verdad? Hay un recipiente adhesivo en la parte superior que contiene los indicadores cuando llegan a la cima. A partir de ahí, tenemos tres secciones de contenido, cada una rematada con un indicador que se adherirá a la parte superior con el indicador y se mezclará con él.

Aquí está el CSS:

.passageStops {  background-color: black; /* Each indicator stop is black */  mix-blend-mode: overlay; /* This makes it appear white on a white background */  width: 33.3%; /* Three sections total, so each section is one-third */  top: calc(1em + 3px);}
#passage, .passageStops{  height: 10px;}
#passageWrapper,.passageStops {  position: sticky; /* The container and stops should stick to the top */  z-index: 1; /* Make sure the indicator and stops stay at the forefront */}
#passage {  background: violet; /* Will blend with black to make a darker violet indicator */  margin: 0 0 20px 0;}
#passageWrapper{  background-color: white; /* Make sure we're working with white to hide indicator stops */  height: 40px;  top: 0px;}
/* Each stop will shift one-third the width of the indicator container to cover the whole thing when the last section is reached. */.passageStops:nth-child(4){ margin-left: 33.3%; }.passageStops:nth-child(6){ margin-left: 66.6%; }
/* More styling, blah blah. */

Los indicadores ( .passageStops) son negros. Pero el modo de fusión de superposición hace que parezcan blancos cuando se fusionan con el fondo blanco debajo. Como hay tres secciones, cada indicador tiene un tercio de ancho.

Los indicadores tienen position: sticky;un valor de distancia superior. Esto significa que los indicadores se mantendrán una vez que alcancen la posición calculada desde la parte superior de la pantalla. Cuando eso sucede, los indicadores negros que parecían blancos se mezclan con el contenedor del indicador violeta, lo que los hace parecer violeta oscuro, lo que representa la nueva posición de desplazamiento en la página.

Lo contrario también es cierto. Cuando un indicador pierde su posición fija, se moverá del fondo violeta de la barra del indicador al fondo blanco de la página, ocultándolo una vez más… ¡como si nunca hubiera estado allí!

Aquí está la demostración nuevamente:

Eso es todo. Quizás puedas experimentar más con esto al tener un fondo que no sea blanco con otro modo de fusión, o un degradado para la barra indicadora o las paradas.