Barra superior fija en una página web
Cuando la página web no puede mostrar todo su contenido en la ventana del navegador aparece el scroll: una barra para desplazarnos hacia arriba y abajo, o hacia los laddros, y poder seguir viendo el contenido. Fácil y elemental, estás totalmene acostumbrado a esto, sobre todo al scroll vertical: arriba y abajo..
Pero al hacer scroll la parte superior de la página sale de la ventana del navegador y deja de ser visible. Y o en esa parte se suele colocar el menú de navegación (la navbar) con lo que este menú quedará oculto. Es cesario volver arriba del todo de la página para poder usarlo
¿Como se soluciona esto? pues poniendo la barra de navegación estática en la posición superior de la ventana, no de la página. De esta forma la página se desplazará pero la barra superior se mantienene fija, estáttica
Esto se logra con los estilos CSS que nos permite fijar un bloque en la ventana del navegador en posición fija, anclada a la ventana.
El código HTML
Para que veas este efecto y como implementarlo vas a crear una página muy simple: solo una barra superior y un bloque bien grande para forzar a que aparezca la barra de scroll vertical.
El contenido de la barra va a ser solo texto, no va a haber un menú funcional, solo una muestra. Si quieres puedes ver como crear una barra de navegación y probar todo junto.
La barra de navegación que queremos mantener fija es un elemento <nav>, dentro hay dos bloques uno para el logo (aquí la palabra LOGO, pero puedes poner una imagen) y otro para el bloque del menú de navegación.
<nav>
<div class="logo">LOGO</div>
<div class="barnav">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
</div>
</nav>
<div class="contenido">
<p>Nulla facilisi. Aenean neque eros, maximus nec enim eu, dapibus tristique urna. Aenean malesuada orci sapien, eget posuere tortor ultricies sed. Nullam nec ante vel ex molestie laoreet vel ac purus. Aliquam condimentum, tortor eu condimentum elementum, quam ante dictum enim, id ultrices lacus ex ac ipsum. Praesent cursus, sapien at bibendum ultricies, elit elit rhoncus sem, ut luctus nisl odio at nulla. Cras magna tellus, pellentesque sed bibendum et, cursus eget massa. Quisque ante metus, accumsan a vulputate sed, luctus a orci. Praesent vel eros ac odio consequat tempus et ac justo. Fusce interdum sapien justo, id semper nisl euismod ac. Nulla quis lacus non ante facilisis auctor eu eu nisi. Nam id orci felis. Donec ac lacinia lacus. Nunc at euismod neque. Praesent vestibulum tellus sed purus porttitor, quis dictum arcu cursus. Mauris aliquet molestie velit sit amet dignissim.</p>
</div>
Esto es el esquema de la página. El relleno del bloque de contenido es para darle altura. Si te falta relleno para mostrar el scroll puedes repeitr este texto. De todas formas con los estilos vamos a darle el tamaño adecuado.
Los estilos CSS
Si has creado la página de ejemplo verás que ahi no existe ninguna barra y todo anda desordenado. Bueno las reglas CSS van a soluconarlo todo.
La barra se construye con el layout grid, otra forma para distribuir elementos en la página. Este grid tiene dos columnas: logo y bloque menú.
El bloque menú es también un grid con tantas columnas como items.
@charset "utf-8";
nav{
display:grid;
grid-template-columns: 1fr auto;
align-items: center;
background: aliceblue;
font-family: sans-serif;
position:fixed;
top:0;
width:100%;
}
nav .logo{
font-size: 24px;
font-weight:black;
}
nav .barnav{
display:grid;
grid-template-columns: repeat(4,auto);
margin-right: 30px;
}
nav .barnav div{
padding: 10px 20px;
}
nav .barnav div:hover{
cursor: pointer;
background:#CDDC39;
}
.contenido{
height: 1100px;
margin-top: 60px;
}
La regla .contenido es para darle altura a la página. Lo importante es la propiedad position: fixed en la regla nav, se pone arriba (top:0) y a todo el ancho de la página (width:100%). Normalmente esto es suficiente, pero si por cualquier circunstancia algun elemento de la página tapara a la barra, basta con añadirle a nav la propiedad z-index con un valor bien alto, 1000 por ejemplo. De esta manera la barra se pondrá por encima de los demás elementos de la página.
Con esto deberás ver la página con la barra fija arriba.