Fijar un encabezado al desplazarse usando CSS, HTML y jQuery

Crear un encabezado que permanezca fijo a medida que se desplaza la página hacia abajo es una Requisito de diseño común. Esto se puede lograr usando una combinación de CSS, HTML y JavaScript (jQuery).

Implementando con CSS, HTML

CSS proporciona la posición: fijo; propiedad, que se puede aplicar a un elemento para fijar su posición en la página, independientemente del desplazamiento. Sin embargo, esto requiere un punto de activación para determinar cuándo el elemento debe repararse.

Rol de JavaScript (jQuery)

Se necesita JavaScript para monitorear el evento de desplazamiento y decidir cuándo aplicar la clase fija al elemento de encabezado. Usando jQuery, se puede escribir un script simple para detectar eventos de desplazamiento y agregar o eliminar la clase fija en consecuencia.

Código HTML

Código CSS

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

Código jQuery

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

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

En este ejemplo, la clase fija se aplica al elemento adhesivo cuando la posición de desplazamiento (scrollTop) supera los 100 píxeles. Puede ajustar este valor según sus requisitos de diseño específicos.

Ejemplo extendido: punto de activación dinámico

Si se desconoce el punto de activación para fijar el elemento, se puede determinado dinámicamente 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 mide dinámicamente la posición vertical del elemento adhesivo y lo corrige cuando llega a la parte superior de la ventana gráfica.

Al combinar estas técnicas, puede crear un encabezado adhesivo usando CSS, HTML y jQuery.