Crea tu web, tutor html, css

Barra fija superior

Cuando la página web no puede mostrar todo su contenido en la ventana del navegador aparece el scroll: una barra para desplazarnos hacia abajo y poder seguir viendo el contenido. Fácil y elemental.

Pero al hacer scroll la parte superior de la página se deja de ver, n principio esto no es un problema. Pero en la parte superior suele estar el menú de navegación y no queremos perderlo para eso está el CSS: nos permite fijar un bloque en la ventana del navegador, no en la págna.

El código HTML

Para que veas este efecto y como implementarlo vas a cerar 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 quirees puedes ver como crear una barra de navegación y probar todo junto.

La barra de navegación es el elmento <nav>, dentro hay dos bloques uno pra 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;
}

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 todo la barra fija arriba.