CSS | ¿Cómo lograr el efecto de monitorear el desplazamiento de la página?

En las páginas web, las sombras se utilizan a menudo para resaltar las relaciones jerárquicas, especialmente la navegación superior, pero a veces el diseño parece que no es necesario mostrar la sombra al principio y solo aparece después de desplazarse. Por ejemplo, en el siguiente ejemplo, preste atención a la sombra de la cabeza.

Como puedes ver, la sombra sólo aparece después de desplazarte. En circunstancias normales, esto se puede lograr usando JS para escuchar eventos de desplazamiento y agregar dinámicamente nombres de clases. Sin embargo, después de algunos intentos, descubrí que este efecto se puede lograr fácilmente usando solo CSS. El siguiente es el efecto de implementación.

1. Posicionamiento fijo del cabezal

Supongamos que hay un diseño como este.

<header>LOGO</header>
<main>很多内容文本</main>

modificación simple

header {
    
    
    background: #fff;
    font-size: 20px;
    padding: 10px;
}

Hay muchas formas de fijar el cabezal y posicionarlo, la más común es utilizar un posicionamiento fijo.

header {
    
    
    position: fixed;
    top: 0;
}

Sin embargo, el posicionamiento fijo no ocupa espacio y bloqueará el área de contenido, por lo que generalmente es necesario reservar una parte del espacio principal, como este.

main {
    
    
	margin-top: 头部的高度
}

Aquí, recomiendo utilizar un posicionamiento adhesivo, que puede retener el marcador de posición original mientras absorbe el techo.

header {
    
    
	position: sticky;
	top: 0
}

El efecto es el siguiente, excepto que no hay sombra.

Dos, principio de implementación de CSS

Lograr este efecto requiere un poco de "ceguera CSS". Supongamos que hay una capa de sombra, que está bloqueada por un elemento de forma predeterminada, que a continuación se denomina "oclusor". Aquí debe considerar la relación jerárquica de cada parte, que es un poco complicada, como se muestra a continuación (diagrama de relación jerárquica lateral)

层级关系为：头部 > 遮挡物 > 阴影 > 内容

Durante el proceso de desplazamiento, la sombra se hará visible automáticamente y la oclusión quedará cubierta por la cabeza. Tenga en cuenta que la oclusión y el contenido se desplazan juntos. La demostración dinámica es la siguiente

Este es el principio, veamos la implementación específica a continuación.

Tres, implementación específica de CSS

Según los principios anteriores, es necesario agregar un elemento aquí: se pueden generar sombras y oclusiones utilizando pseudoelementos.

<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>

La posición de la sombra aquí es fija y no necesita ocupar espacio, por lo que puede usar directamente el posicionamiento fijo, o no necesita establecer el valor superior, porque la posición predeterminada es la posición no posicionada (lo que refleja los beneficios de pegajoso), es decir, el jefe dependiente del Ministerio.

shadow::before {
    
    
    content: '';
    box-shadow: 0 0 10px 1px #333;
    position: fixed; /* 无需top值 */
    width: 100%;
}

fixed 定位在不设置top或者left值时，仍然位于原先位置，但是会在这个位置固定下来

La oclusión se puede rellenar con un color sólido y necesita desplazarse con el contenido sin ocupar espacio, al mismo tiempo para mejorar el nivel se puede establecer un posicionamiento absoluto.

shadow::before {
    
    
    content: '';
    width: 100%;
    height: 15px;
    background: #fff;
    position: absolute; /*无需top值*/
}

absolute定位在不设置top或者left值时，仍然位于原先位置，也会跟随内容滚动。

Ahora echemos un vistazo a la relación jerárquica: los objetos de cabeza, sombra y oclusión están ubicados de acuerdo con el orden DOM.

层级关系为：遮挡物 > 阴影 > 头部 > 内容

La cabeza debe ser la más alta, por lo que debes cambiar el nivel por separado.

header {
    
    
	z-index: 1;
}

层级关系为：头部 > 遮挡物 > 阴影 > 内容

De esta forma se consigue el efecto que se muestra al principio del artículo, y el efecto es el siguiente:

4. Sombras más suaves

De hecho, el efecto anterior ya es muy bueno, pero un poco rígido. Observe con atención, durante el lento proceso de desplazamiento, la sombra tiene la sensación de "empujar hacia arriba", de la siguiente manera

¿Hay alguna manera de hacer que este proceso sea un poco más suave? ¿Como cambios en la transparencia?

Por supuesto que es posible y la implementación es relativamente sencilla. La razón por la que lo anterior es bastante contundente es que la obstrucción es de color sólido. ¿No sería mejor si fuera reemplazada por un degradado translúcido?

shadow::after {
    
    
    height: 30px;
    background: linear-gradient(to bottom, #fff 50% , transparent);
}

El efecto es el siguiente

De esta forma, el efecto de la sombra ya no es un efecto de "empuje hacia arriba", ¿qué opinas?

Aquí viene el punto ~

A continuación se muestra el código CSS completo (menos de 20 líneas)

header{
    
    
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
    
    
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
    
    
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}

La estructura HTML también es muy simple.

<header>LOGO</header>
<shadow></shadow>
<!-- <main>很多内容文本</main> -->
<main>
    <p>痛！</p>
    <p>好痛！</p>
    <p>头好痛！</p>
    <p>光怪陆离满是低语的梦境迅速支离破碎，熟睡中的周明瑞只觉得脑袋抽痛异常，仿佛被人用棒子狠狠沦了一下，不，更像是遭尖锐的物品刺入太阳穴并伴随有搅动！</p>
    <p>嘶......迷迷糊糊间，周明瑞想要翻身，想要捂头，想要坐起，可完全无法挪动双脚，身体似乎失去了控制。</p>
</main>

V. Resumen y perspectivas

Ese es todo el contenido compartido anteriormente. ¿Has dominado otro truco de CSS? Se utilizan tres atributos de posicionamiento a un costo casi nulo. Simplemente copie unas pocas líneas de código y podrá usarlo de inmediato. Aquí hay un resumen de los puntos clave de implementación:

1. Se recomienda utilizar adhesivo para implementar el diseño de la cabeza fija. La ventaja es que el espacio de la cabeza se puede reservar sin reservas adicionales.
2. La idea general de implementación es que la ceguera de CSS y los niveles de CSS se bloquean entre sí.
3. El posicionamiento fijo seguirá estando en la posición original cuando el valor superior o izquierdo no esté establecido, pero se fijará en esta posición.
4. Cuando el posicionamiento absoluto no establece el valor superior o izquierdo, seguirá en la posición original y también se desplazará con el contenido.
5. La oclusión de color sólido es un poco rígida al desplazarse y la oclusión de degradado translúcido es más suave al desplazarse.

En el futuro, estas interacciones relacionadas con el desplazamiento se podrán realizar a través de @scroll-timeline. Aquellos que estén interesados ​​pueden conocer este aspecto con anticipación, pero es casi imposible usarlo en la producción real (actualmente, la función experimental debe ser (activado manualmente), y es imposible que el funcionario lo haga. Una vez que lo cuidas, incluso si tienes un plan o un borrador, pueden ser muchos años después, por lo que al aprender CSS, no debes dejar de pensar. e imaginar Esta es probablemente la parte más interesante de CSS.

Este artículo proviene principalmente de Front-end Detective, un creador particularmente excelente, y me gustaría expresarle mi agradecimiento especial.

e implementarlo. Aquellos que estén interesados ​​pueden conocer este aspecto con anticipación. Sin embargo, es casi imposible usarlo en la producción real (actualmente, las funciones experimentales deben activarse manualmente). Es imposible para el funcionario cuídalos uno por uno. Incluso si hay un plan y un borrador, puede ser muchos años después. Así que no dejes de pensar e imaginar cuando aprendas CSS. Esta es probablemente la parte más interesante de CSS.

Este artículo proviene principalmente de Front-end Detective, un creador particularmente excelente, y me gustaría expresarle mi agradecimiento especial.