Con la expansión de los dispositivos móviles y la tendencia del formato vertical en las páginas web, se ha ido extendiendo la necesidad de mantener la cabecera de nuestra web con el menú fijo en la parte superior del navegador mientras hacemos scroll, de forma que no es necesario volver a subir hasta arriba para poder seguir navegando.
Una forma sencilla de conseguir esto es mediante jQuery, para detectar cuando el usuario hace scroll, y CSS para aplicar una clase determinada en el momento del scroll.
Aquí tienes un ejemplo del código:
jQuery:
jQuery(function( $ ){
$(".site-header").after('<div class="bumper"></div>');
$(window).scroll(function () {
if ($(document).scrollTop() > 30 ) {$('.site-header').addClass('fija');}
else {$('.site-header').removeClass('fija');}
});
});CSS
.fija {
position: fixed;
width: 100%;
z-index: 999;
}Con este CSS simplemente la mantendremos fija, pero podemos aprovechar también para modificar algo más del diseño: si la cabecera es muy grande será conveniente hacerla un poco más pequeña, modificar el color, tamaño de texto, logo, etc…