Um cabeçalho sticky pode ganhar uma borda ou um fundo mais definido ao encostar no topo. Use o estado fixado para marcar que ele passou a cobrir o conteúdo rolável, mantendo a altura e os controles no mesmo lugar. Se o navegador oferecer consultas de estado de rolagem, aplique a mudança a um elemento interno do cabeçalho com scroll-state(stuck: top). A apresentação básica deve continuar legível antes, durante e depois da fixação.
Imagine uma biblioteca de componentes em que cada página começa com o título, um resumo e uma navegação entre demonstração, estados e exemplos. A navegação se prende ao topo quando a pessoa desce. No início, ela fica sobre o mesmo fundo do título e parece parte da apresentação. Mais abaixo, ela passa sobre cartões e blocos de código. Uma borda inferior sutil nessa fase ajuda a perceber onde termina a navegação e começa o trecho que passa por baixo.
Escolha uma mudança que preserve a posição dos controles
Comece com duas capturas no mesmo tamanho. Na primeira, mostre a navegação ainda no fluxo normal. Na segunda, mostre a faixa fixa sobre a parte mais carregada da página. Compare a legibilidade dos rótulos, a visibilidade da aba selecionada e a separação entre a faixa e o corpo. Escolha o menor conjunto de mudanças que resolve a interferência. Em um fundo claro, um traço com contraste moderado pode bastar. Sobre imagens, um preenchimento opaco costuma oferecer controle maior sobre a cor que fica atrás dos rótulos.
Reserve a mesma altura em ambos os estados. Se adicionar uma borda alterar a medida, use uma borda transparente na base e mude a cor, ou desenhe a separação com uma sombra interna. Assim, o conteúdo mantém a sua posição e o alvo sob o ponteiro continua onde a pessoa esperava. Faça o teste com o rótulo mais longo e com zoom ampliado. Se a faixa precisar de duas linhas, a segunda linha deve estar prevista na composição e na medida usada para afastar os destinos de navegação.
Em páginas com uma barra global e uma navegação local, decida qual delas precisa acompanhar a leitura. Duas faixas fixas podem consumir uma parte grande da janela em paisagem ou sob zoom. Comece pela faixa com as ações que a pessoa procura durante a tarefa. A outra pode permanecer no fluxo e reaparecer ao subir. Para estudar onde termina o cabeçalho e onde começa a região rolável ainda no protótipo, simule uma página longa com os controles que irão existir na versão real. Como representar conteúdo rolável no Figma.
Como aplicar o estado fixado em CSS
Monte um invólucro com position: sticky e top: 0 para uma página com escrita horizontal. Defina container-type: scroll-state nesse invólucro e coloque a superfície visual em um elemento descendente. Na regra @container scroll-state(stuck: top), altere a cor da borda ou a sombra da superfície. O contêiner é a peça que fixa. O descendente recebe a mudança visual quando a consulta corresponde. Se houver mais de um contêiner de estado na mesma região, dê um nome ao alvo e use esse nome na consulta para vincular a regra ao cabeçalho correto. Consulta de estado de rolagem no Chrome para desenvolvedores.
Se a faixa nunca fixa, descubra primeiro qual caixa rola. Um ancestral com configuração de overflow pode mudar a referência usada pelo sticky, e um invólucro curto pode limitar a distância pela qual a faixa permanece fixa. Faça um protótipo com uma única região rolável e acrescente a estrutura real aos poucos. Teste também o ponto final da seção. Uma navegação contextual pode se soltar ao fim da área que descreve, deixando a seção seguinte ocupar o topo.
Planeje a aparência básica para os navegadores em que a consulta não executar. Uma superfície sólida com borda discreta funciona ao longo de toda a rolagem e oferece uma referência estável. Trate a mudança no momento da fixação como um detalhe visual. Preserve a indicação do item ativo e a presença dos controles em todos os estados. Para realçar o item ativo, combine a cor com forma ou posição, como um traço abaixo do rótulo. Confira a distinção também nos modos que substituem cores da interface. Revisão de controles em cores forçadas.
Como evitar que a faixa cubra âncoras e foco
Abra a página por um endereço que já aponta para uma seção e veja onde aparece o título dessa seção. Se ele parar sob a faixa, reserve a altura do cabeçalho na área de rolagem com scroll-padding-block-start ou defina uma margem de rolagem nos destinos com scroll-margin-block-start. Aplique a reserva à caixa relevante e confira o caso em que uma segunda faixa fica fixa acima. Use um pequeno respiro além da altura medida para que o título seja claramente associado ao conteúdo que vem abaixo.
Percorra os controles com Tab e volte com Shift mais Tab. Observe especialmente o primeiro link de uma seção e o último controle antes de um divisor. Quando o navegador deslocar a página para mostrar o foco, o elemento deve continuar visível. O critério mínimo de foco desobstruído das WCAG trata justamente de componentes focados encobertos por conteúdo criado pelo autor. Para a revisão visual, procure deixar o controle e seu contorno inteiros à vista, inclusive quando o mínimo seria atendido por uma parte visível. WCAG sobre foco desobstruído.
Teste os destinos por três caminhos. Clique na navegação local, carregue um endereço com fragmento e volte à seção com o botão de retorno do navegador. Os três podem posicionar a janela de formas diferentes durante o uso. Na largura em que os rótulos quebram, revise se a altura adicional entrou na conta. Quando houver uma versão móvel com menu expansível, repita o clique com o menu aberto e confirme que o título de destino fica visível depois do fechamento.
Confira também a sobreposição com menus e avisos. Abra um menu da faixa enquanto um cartão logo abaixo contém um controle flutuante. O menu deve aparecer inteiro e fechar de maneira previsível pelo teclado. Se a barra tiver um nível visual próprio, determine a posição dos elementos em relação à faixa no mesmo teste, com o conteúdo rolado e com o conteúdo no início. Um menu que funciona apenas no começo da página pode estar sendo recortado pela caixa que rola.
Como revisar a passagem entre os dois estados
Role devagar até a faixa encostar no topo, pare no ponto de contato e desça mais uma linha. Suba de volta no mesmo ritmo. Faça o percurso sobre uma seção clara, outra escura e uma terceira com texto denso. Verifique se a separação é perceptível em cada fundo e se o cabeçalho mantém sua altura. Quando houver transição visual, confira que ela pode ser interrompida no meio da rolagem sem deixar a faixa por instantes ilegível.
Registre na especificação a altura em cada composição, o plano que recebe a borda e a distância esperada até o título após abrir uma âncora. Anexe uma captura com foco visível logo abaixo da faixa. Isso dá à equipe um caso concreto para reproduzir quando um rótulo crescer ou quando a página ganhar outra barra acima do cabeçalho. Uma boa revisão termina com o conteúdo de destino legível e com a navegação disponível na posição prevista.