Sticky bar, cómo crear un menú siempre pegado arriba

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Hoy voy a colgar aquí un pequeño tutorial para una persona que me ha preguntado como se hace una Sticky bar como la que tenía en el anterior tema de esta web. Se trata de un pequeño código CSS que se puede resumir en una sola propiedad «position:fixed;«.

Desde hace ya bastante tiempo, muchas páginas web nos ofrecen la posibilidad de añadir una barra de navegación fija en el header o dicho en inglés: sticky bar. Seguro que estas cansado de ver este tipo de menús, pues son estos aparecen en la parte superior y que te siguen cuando bajas en la página web.

El siguiente código no es más que un pequeño ejemplo para realizar un menú que siempre quede pegado en la parte superior de la pantalla. Es de gran utilidad para sitios que tienen un gran tamaño de alto. Yo me he desecho de el ya que el estilo que he puesto en la web, lo hacen bastante inútil. De esta manera los usuarios podrán siempre tener a la vista el menú de navegación. Hacer scroll sobre la web ya no será un problema.

Crear una Sticky bar para el menú de tu página web

Como ya he dicho este es un pequeño ejemplo que se puede complicar todo lo que el código te permita. Primero vamos a ver el código HTML del archivo que llamé index.html:

<html lang="es">
<head>
<meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="contenedor">
 
            <nav>
                <ul>
                    <li><a href="#">PI</a></li>
                    <li><a href="#">PO</a></li>
                    <li><a href="#">PA</a></li>
                    <li><a href="#">RA</a></li>
                    <li><a href="#">PIN</a></li>
                    <li><a href="#">POM</a></li>
                </ul>
            </nav>
 
            <header> 
                <h1><a href="https://entreunosyceros.net" rel="nofollow">entreunosyceros.net</a></h1>
            </header>  
 
            <div class="contenido">  
                
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum felis, feugiat et dictum id, vulputate non mi. Nullam hendrerit quis elit at tristique. Praesent adipiscing quam mattis, iaculis orci ac, adipiscing erat. Nam ac dignissim enim. Curabitur nec tempor tortor. Suspendisse fermentum id sapien sit amet porttitor. Proin facilisis, est ut laoreet consectetur, odio nibh lobortis felis, at pulvinar enim elit nec neque. Proin nibh elit, aliquam et convallis a, aliquet quis elit. Sed augue nunc, sollicitudin vel tellus at, tristique ultrices ligula. Etiam blandit interdum nulla eget accumsan. In blandit varius gravida.
                </p>
                <p>
                    Etiam sit amet libero ac tortor tempor consequat. Pellentesque pharetra sem sed felis lobortis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque in dui nisi. Morbi eu leo elementum, vehicula odio et, fermentum mauris. Etiam nec lacus iaculis, viverra urna ut, vehicula sem. Etiam vestibulum congue ipsum, id euismod magna hendrerit id. Nulla commodo elit eget eros blandit convallis. Sed fermentum nisi vel mi pretium, ut ullamcorper eros mattis. Sed ornare lacus augue, eget ultricies risus varius vitae. Duis condimentum tincidunt odio, sed ultrices velit vulputate sit amet. Morbi magna nibh, vehicula sed blandit id, facilisis eget leo. Aliquam ultricies purus laoreet ipsum dictum, ut mollis sapien mattis. In hac habitasse platea dictumst. Nunc in sem eget tortor facilisis porta.
                </p>
                <p>
                    Mauris dapibus ligula quis orci lobortis lobortis. Vestibulum interdum adipiscing risus, quis placerat ante fermentum nec. Donec sapien diam, vulputate a lacus sed, accumsan semper diam. Vivamus non blandit leo. Integer rhoncus a nunc sed porttitor. Vivamus feugiat gravida mollis. Cras eu eros in sapien elementum rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque pharetra auctor ultrices.
                </p>
                <p>
                    Vestibulum porttitor velit eu suscipit dignissim. Maecenas eget lacus nec lacus condimentum faucibus. Suspendisse augue nibh, hendrerit in turpis vitae, mollis tempor urna. Nulla facilisi. Fusce ac mattis purus. Ut id condimentum mauris. Duis fermentum dolor et urna ullamcorper eleifend. Fusce at tortor diam. Aenean accumsan mi justo, sit amet consequat lectus hendrerit ac. Quisque tincidunt mattis tortor eget venenatis. Nam sed velit dictum lorem semper placerat id nec urna.
                </p>
                <p>
                    Maecenas lectus risus, molestie tempus volutpat non, consequat et enim. Morbi eu massa ac sem hendrerit suscipit. Vivamus risus lacus, bibendum ac elit eget, luctus suscipit magna. Suspendisse sodales, enim ut scelerisque aliquet, nisi nunc pretium massa, vel feugiat elit dolor nec tortor. Vivamus at sapien id eros sagittis imperdiet. Suspendisse tincidunt, sapien ut varius gravida, enim felis laoreet ante, ut fermentum erat arcu vitae dolor. Donec vel quam ipsum. Morbi eleifend urna sem, id consectetur felis fermentum sed. Nam purus lectus, eleifend id eros ut, dapibus dictum tellus. Cras eleifend scelerisque imperdiet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum felis, feugiat et dictum id, vulputate non mi. Nullam hendrerit quis elit at tristique. Praesent adipiscing quam mattis, iaculis orci ac, adipiscing erat. Nam ac dignissim enim. Curabitur nec tempor tortor. Suspendisse fermentum id sapien sit amet porttitor. Proin facilisis, est ut laoreet consectetur, odio nibh lobortis felis, at pulvinar enim elit nec neque. Proin nibh elit, aliquam et convallis a, aliquet quis elit. Sed augue nunc, sollicitudin vel tellus at, tristique ultrices ligula. Etiam blandit interdum nulla eget accumsan. In blandit varius gravida.
                </p>
                <p>
                    Etiam sit amet libero ac tortor tempor consequat. Pellentesque pharetra sem sed felis lobortis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque in dui nisi. Morbi eu leo elementum, vehicula odio et, fermentum mauris. Etiam nec lacus iaculis, viverra urna ut, vehicula sem. Etiam vestibulum congue ipsum, id euismod magna hendrerit id. Nulla commodo elit eget eros blandit convallis. Sed fermentum nisi vel mi pretium, ut ullamcorper eros mattis. Sed ornare lacus augue, eget ultricies risus varius vitae. Duis condimentum tincidunt odio, sed ultrices velit vulputate sit amet. Morbi magna nibh, vehicula sed blandit id, facilisis eget leo. Aliquam ultricies purus laoreet ipsum dictum, ut mollis sapien mattis. In hac habitasse platea dictumst. Nunc in sem eget tortor facilisis porta.
                </p>
                <p>
                    Mauris dapibus ligula quis orci lobortis lobortis. Vestibulum interdum adipiscing risus, quis placerat ante fermentum nec. Donec sapien diam, vulputate a lacus sed, accumsan semper diam. Vivamus non blandit leo. Integer rhoncus a nunc sed porttitor. Vivamus feugiat gravida mollis. Cras eu eros in sapien elementum rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque pharetra auctor ultrices.
                </p>
                <p>
                    Vestibulum porttitor velit eu suscipit dignissim. Maecenas eget lacus nec lacus condimentum faucibus. Suspendisse augue nibh, hendrerit in turpis vitae, mollis tempor urna. Nulla facilisi. Fusce ac mattis purus. Ut id condimentum mauris. Duis fermentum dolor et urna ullamcorper eleifend. Fusce at tortor diam. Aenean accumsan mi justo, sit amet consequat lectus hendrerit ac. Quisque tincidunt mattis tortor eget venenatis. Nam sed velit dictum lorem semper placerat id nec urna.
                </p>
                <p>
                    Maecenas lectus risus, molestie tempus volutpat non, consequat et enim. Morbi eu massa ac sem hendrerit suscipit. Vivamus risus lacus, bibendum ac elit eget, luctus suscipit magna. Suspendisse sodales, enim ut scelerisque aliquet, nisi nunc pretium massa, vel feugiat elit dolor nec tortor. Vivamus at sapien id eros sagittis imperdiet. Suspendisse tincidunt, sapien ut varius gravida, enim felis laoreet ante, ut fermentum erat arcu vitae dolor. Donec vel quam ipsum. Morbi eleifend urna sem, id consectetur felis fermentum sed. Nam purus lectus, eleifend id eros ut, dapibus dictum tellus. Cras eleifend scelerisque imperdiet.
                </p>
                <p>
                  Rellena esto con cosas para ver el resultado como se debe ....
                </p>
                
            </div>  
 
            <footer> 
                <h1>Se terminó!</h1>
            </footer>  
 
        </div>
</body>
</html>

… y una vez visto que no tiene nada más que unos enlaces y texto de relleno. Ahora vamos a eschar un vistazo al css que acompañará al archivo html.

* {
margin: 0;
padding: 0;
}
body {
background-color: #F0F0F0;
font-family: Arial, Helvetica;
font-size: 12px;
color: #000;
}
h1 {
font-family: Helvetica, Arial;
font-size: 40px;
font-weight: bold;
margin: 10px 0 10px 0;
}
h1 a {
text-decoration: none;
color: #9F1800;
}
h1 a:hover {
text-decoration: underline;
}
p {
margin-bottom: 15px;
text-align: justify;
}
header {
color: yellow;
max-width: 960px;
margin: auto;
margin-top: 55px;
}
.contenido, footer {
max-width: 960px;
margin: auto;
}

/*==== Menu ====*/
nav {
background-color: #5A5A5A;
height: 35px;
position: fixed; /*la propiedad que fija el menú*/
top: 0;
left: 0;
width: 100%;
}
nav ul {
width: 960px;
margin: auto;
}
nav ul li {
line-height: 35px;
display: inline-block;
padding-right: 50px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}

Y con esto ya tendremos conseguido nuestro menú «pegajoso». Con ello conseguiremos una página web un poco más vistosa y manejable (evitando el scrool demasiado lago). Si no te crees que esto vaya a funcionar, siempre puedes echar un vistazo al ejemplo, en el que he utilizado exactamente el mismo código que aquí muestro.