CSS | Como conseguir o efeito de monitorar a rolagem da página?

Nas páginas da web, as sombras são frequentemente usadas para destacar relações hierárquicas, especialmente a navegação superior.No entanto, às vezes o design parece que não é necessário exibir a sombra no início, e ela só aparece após a rolagem. Por exemplo, no exemplo a seguir, preste atenção à sombra da cabeça

Como você pode ver, a sombra só aparece após a rolagem. Em circunstâncias normais, isso pode ser alcançado usando JS para ouvir eventos de rolagem e adicionar nomes de classes dinamicamente. No entanto, após algumas tentativas, descobri que esse efeito pode ser facilmente alcançado usando apenas CSS. A seguir está o efeito de implementação.

1. Posicionamento fixo da cabeça

Suponha que exista tal layout

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

Basta modificá-lo

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

Existem muitas maneiras de fixar a cabeça, a mais comum é usar posicionamento fixo

header {
    
    
    position: fixed;
    top: 0;
}

No entanto, o posicionamento fixo não ocupa espaço e bloqueará a área de conteúdo, por isso geralmente é necessário reservar uma parte do espaço principal, como este

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

Aqui, recomendo usar o posicionamento adesivo, que pode reter o espaço original enquanto absorve o teto

header {
    
    
	position: sticky;
	top: 0
}

O efeito é o seguinte, só que sem a sombra

2. Princípio de implementação CSS

Alcançar esse efeito requer um pouco de “cegueira CSS”. Suponha que haja uma camada de sombra que é bloqueada por padrão por um elemento chamado "oclusor" abaixo. Aqui você precisa considerar o relacionamento hierárquico de cada parte, o que é um pouco complicado, conforme mostrado abaixo (diagrama lateral do relacionamento hierárquico)

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

Durante o processo de rolagem, a sombra ficará automaticamente visível e a oclusão será coberta pela cabeça. Observe que a oclusão e o conteúdo rolam juntos. A demonstração dinâmica é a seguinte

Este é o princípio, veja a implementação específica abaixo

3. Implementação específica de CSS

Com base nos princípios acima, um elemento precisa ser adicionado aqui. Sombras e oclusões podem ser geradas usando pseudoelementos.

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

A posição da sombra aqui é fixa e não precisa ocupar espaço, então você pode usar o posicionamento fixo diretamente, ou não precisa definir o valor superior, porque a posição padrão está na posição não posicionada (refletindo os benefícios de pegajoso), isto é, a cabeça abaixo.

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

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

A oclusão pode ser preenchida com uma cor sólida e precisa rolar com o conteúdo sem ocupar espaço, ao mesmo tempo, para melhorar o nível, pode ser definido um posicionamento absoluto.

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

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

Agora vamos dar uma olhada no relacionamento hierárquico. Os objetos de cabeça, sombra e oclusão são todos posicionados de acordo com a ordem do DOM. Neste momento

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

A cabeça deve ser a mais alta, então você precisa alterar o nível separadamente.

header {
    
    
	z-index: 1;
}

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

Desta forma, consegue-se o efeito mostrado no início do artigo, e o efeito é o seguinte:

4. Sombras mais suaves

Na verdade, o efeito acima já é muito bom, mas é um pouco rígido. Observe com atenção, durante o processo de rolagem lenta, a sombra tem a sensação de “empurrar para cima”, como segue

Existe uma maneira de tornar esse processo um pouco mais suave? Gosta de mudanças na transparência?

Claro, também é possível e a implementação é relativamente simples. O texto acima é relativamente contundente porque o oclusor é de cor sólida. Não seria melhor alterá-lo para um gradiente translúcido?

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

O efeito é o seguinte

Então o efeito da sombra aparecer não é mais “empurrar para cima”, o que você acha?

Aí vem o ponto ~

A seguir está o código CSS completo (menos de 20 linhas)

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;
}

A estrutura HTML também é muito simples

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

5. Resumo e perspectivas

Esse é todo o conteúdo compartilhado acima. Você já domina outro truque de CSS? Três atributos de posicionamento são usados ​​com custo quase zero. Basta copiar algumas linhas de código e você poderá usá-lo imediatamente. Aqui está um resumo dos principais pontos de implementação:

1. Recomenda-se o uso de sticky para implementar o layout da cabeça fixa. A vantagem é que o espaço da cabeça pode ser reservado sem reservas adicionais.
2. A ideia geral de implementação é o método CSS de venda cega e o nível CSS, que bloqueiam um ao outro.
3. O posicionamento fixo ainda estará na posição original quando o valor superior ou esquerdo não estiver definido, mas será fixado nesta posição.
4. Quando o posicionamento absoluto não define o valor superior ou esquerdo, ele ainda estará na posição original e também rolará com o conteúdo.
5. A oclusão de cor sólida é um pouco rígida durante a rolagem, e a oclusão gradiente translúcida é mais suave durante a rolagem.

No futuro, essas interações relacionadas à rolagem poderão ser realizadas através do @scroll-timeline. Os interessados ​​​​podem conhecer esse aspecto com antecedência, mas é quase impossível de ser utilizado na produção real (atualmente, o recurso experimental precisa ser ativado manualmente), e é impossível para o funcionário fazê-lo. Depois de cuidar disso, mesmo que você tenha um plano ou rascunho, pode demorar muitos anos, então ao aprender CSS, você não deve parar de pensar e imaginando. Esta é provavelmente a parte mais interessante do CSS.

Este artigo vem principalmente do Front-end Detective, um criador particularmente excelente, e gostaria de expressar meus agradecimentos especiais a ele.

e implementá-lo. Os interessados ​​​​podem conhecer esse aspecto com antecedência. Porém, é quase impossível de ser utilizado na produção real (atualmente, os recursos experimentais precisam ser ativados manualmente). É impossível para o funcionário cuide deles um por um. Mesmo que haja um plano e um rascunho, pode demorar muitos anos. , então não pare de pensar e imaginar ao aprender CSS. Esta é provavelmente a parte mais interessante do CSS.

Este artigo vem principalmente do Front-end Detective, um criador particularmente excelente, e gostaria de expressar meus agradecimentos especiais a ele.