25 de dezembro, 2016 | 0 | Marcelo Torres

Cabeçalho fixo ao rolar a página com CSS e uma pitada de jQuery

Um tempo atrás no blog antigo eu tinha publicado como criar com CSS e Jquery, um cabeçalho que se mantém fixo no topo ao rolar a página do site. Achei interessante republicar por que percebo que muita gente ainda pergunta sobre isso. Segue abaixo esse simples script que está armazenado lá no meu CodePen.

Pontos importantes

CSS

No CSS eu criei defino o estilo para o estado normal do header e uma classe fixed-header que irá que irá sobrescrever o estado normal e fixar o cabeçalho no topo da página.

JQuery

Usei o JQuery apenas para identificar onde está a posição do scroll da página e adicionar a classe fixed-header quando a posição do scroll está acima de 300.

Olhe abaixo o resultado.

Nota: Para uma melhor visualização clique aqui neste link -> http://codepen.io/marcelotorres/full/rLOKgG/

See the Pen Cabeçalho fixo simples (simple fixed header) by Marcelo Torres (@marcelotorres) on CodePen.

Alguma dúvida? Comenta ai em baixo.

Última atualização: 24 janeiro, 2017 às 8:08 pm