Corrigindo um cabeçalho na rolagem usando CSS, HTML e jQuery

Criar um cabeçalho que permanece fixo enquanto a página é rolada para baixo é uma requisito de projeto comum. Isso pode ser conseguido usando uma combinação de CSS, HTML e JavaScript (jQuery).

Implementação com CSS, HTML

CSS fornece a posição: fixa; propriedade, que pode ser aplicada a um elemento para fixar sua posição na página, independentemente da rolagem. No entanto, isso requer um ponto de gatilho para determinar quando o elemento deve ser corrigido.

Função do JavaScript (jQuery)

JavaScript é necessário para monitorar o evento de rolagem e decidir quando aplicar a classe fixa ao elemento de cabeçalho. Usando jQuery, um script simples pode ser escrito para detectar eventos de rolagem e adicionar ou remover a classe fixa de acordo.

Código HTML

Código CSS

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

jQuery Code

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Neste exemplo, a classe fixa é aplicada ao elemento fixo quando a posição de rolagem (scrollTop) excede 100 pixels. Você pode ajustar esse valor com base em seus requisitos específicos de projeto.

Exemplo estendido: ponto de acionamento dinâmico

Se o ponto de acionamento para fixar o elemento for desconhecido, ele pode ser determinado dinamicamente usando offset().top.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Este código mede dinamicamente a posição vertical do elemento fixo e a corrige quando ele atinge o topo da janela de visualização.

Ao combinar essas técnicas, você pode criar um cabeçalho fixo usando CSS, HTML e jQuery.