Seguramente has visto algunos sitios que mantienen la cabecera fija al hacer scroll, esta funcionalidad usualmente es parte del theme, sin embargo si tienes un theme que no tiene esta funcionalidad podrías evaluar implementarla.
Resultado final cabecera fija
Al final obtendremos un resultado similar a lo siguiente:
1- Revisando la Estructura HTML
Básicamente para lograr esta funcionalidad el theme tiene que tener una estructura similar al siguiente código HTML
<body>
<header>
Codigo de la cabecera
</header>
<div class="content">
Contenido del sitio
</div>
</body>
En el código anterior:
- La etiqueta HTML header representa el contenido que queremos fijar
- La etiqueta div con la clase content igualmente la usaremos en nuestro código CSS para desplazar el contenido
2- Código CSS para fijar la cabecera
Según nuestro código base, podemos usar el siguiente código CSS.
header{
position: fixed;
top:0;
width:100%;
height:20px;
z-index:9999;
background-color:black;
color:white;
}
#content{
margin-top:20px;
}
En el código anterior
- La etiqueta header se posiona en fixed, además se usa el z-index con un valor alto para que la cabecera aparezca siempre por encima del resto de elementos
- El div con el ID content tiene que ser desplazado y evitar la superposición con el header, es por eso que se da un margin-top
3- Modo Responsive
Es muy probable que la altura de la cabecera cambie cuando el ancho de pantalla sea menor, en tal caso tienes dos opciones.
3.1- Cabecera fija siempre
Es decir, si cambia la altura de la cabecera en móvil, tienes que modificar la altura a través de media queries
Por ejemplo, si para un dispositivo de 780px de ancho la altura aumenta a 40px, entonces puedes agregar el siguiente código:
@media (max-width: 768px){
header{
height:40px;
}
#content{
margin-top:40px;
}
}
3.2- Cabecera fija a partir de determinado ancho
Esto es más sencillo y sólo tienes que colocar una restricción al código inicial para que funcione a partir de un determinado ancho, usarás igual media queries.
Modifica el código inicial y agrega @media, por ejemplo para que funcione sólo a partir de 1024px tendrías un código como:
@media (min-width: 1024px){
header{
position: fixed;
top:0;
width:100%;
height:20px;
z-index:9999;
background-color:black;
color:white;
}
#content{
margin-top:20px;
}
}
4- Cabecera Fija animada con Javascript
Es posible que quieras variar los elementos de la cabecera, por ejemplo las dimensiones del logo, esto lo puedes lograr agregando una clase CSS dinámicamente a través de javascript.
Suponiendo que para la cabecera tienes una imagen con 400px de ancho con el siguiente código HTML:
<header>
<img src="http://decodecms.app/wp-content/themes/decodecms/images/logo.svg" width="400" />
</header>
Puedes entonces agregar una clase al header con javascript
<script>
$(window).scroll(function(){
if ( $(this).scrollTop()>50 ){
$('header').addClass("fijo");
}
else{
$('header').removeClass("fijo");
}
});
</script>
En el código anterior
- Usamos jquery y la función scroll como parte del código
- Cuando el scroll es mayor a 50px se agrega una clase al header llamada fijo
Finalmente, tienes que codificar la clase CSS fijo en base al HTML de cabecera, reduciendo el ancho a 180px y dando una animación:
header.fijo img{
width:180px;
transition: all 0.4s ease;
}
¿Aún con dudas?, en el siguiente video se ve algunos ejemplos de aplicación con diferentes themes WordPress
Artículos Relacionados
(2 votos, promedio: 4,00 de 5)
Cargando…