Tutorial: Mantener fijo el menú al hacer Scroll (Parte I)

HAY UN TUTORIAL MEJORADO CON ESTE MISMO EFECTO: PODEIS VERLO EN: MANTENER FIJO EL MENÚ AL HACER SCROLL

Cada vez está más de moda este efecto; se trata de mantener el menú fijo en el top de la pantalla al hacer scroll vertical.

Puede parecer complicado, pero la verdad que es muy facilito de hacer.

Este pequeño código lo que hará es añadir una clase al menú y al contenedor posterior mediante jquery.

Es importante que al aplicar estas líneas no ocurra ningún salto raro que ensucie nuestra página Web. Para ello lo que vamos a hacer es darle un alto (height) fijo a nuestro header (por ejemplo 250px), para que cuando se haga scroll más de esa cantidad de píxeles (250px), el código lo detecte y añada una clase al menú; en concreto una clase cuya propiedad sea «position:fixed», y una clase al contenedor, dándole un «margin-top», para que no se produzca un feo salto, entre otras.

Por otro lado, seguro que estas pensado, ¿Y qué pasa si volvemos a subir hasta arriba haciendo scroll? ¿el header ya no se verá?

Pues, la solución para esto lo vereis más adelante en código. Simplemente se quita esa clase que le hemos añadido mediante jquery, para que, efectivamente se vuelva a ver el header.

DEMO

Vamos al lio:

1. Clases CSS:

<style type="text/css">
img{border:0}
body{margin:0; padding:0}
h1{color:#FFFFFF; float: right; font-size: 1.6em; margin-top: 120px;}

#header{width:100%; height:250px; background:black; }
#headercont{width:900px; margin:auto;height:250px}
#headercont img{margin-top:20px; float:left}
#menu{width:100%; height:50px; background:#2b2b2b; padding-top:20px; text-align:center; min-width:900px}
#menu a{font-family:arial; color:white; text-decoration:none;margin-left:30px; margin-right:30px}

.contenedor{width:900px; margin:auto}
#ancla1{height:900px; border:1px solid grey; padding:20px}
#ancla2{height:500px; border:1px solid red; padding:20px}
#ancla3{height:700px; border:1px solid green; padding:20px}
.fixed{position:fixed;top:0}
.margen{margin-top:50px}
</style>

2. Código HTML:

<div id="header">
<div id="headercont"><a href="https://unaicalleja.es" target="_blank"><img alt="diseño web en bilbao" src="diseno-web-bilbao.jpg" /></a>
<h1>TUTORIAL: MANTENER MENÚ AL HACER SCROLL</h1>
</div>
</div>
<div id="menu"><a href="#">Ir al ancla1</a> <a href="#">Ir al ancla2</a> <a href="#">Ir al ancla3</a></div>
<div class="contenedor">
<div id="ancla1">Contenido 1</div>
<div id="ancla2">Contenido 2</div>
<div id="ancla3">Contenido 3</div>
</div>

3. Por último, el código JQuery:

En el if, como veis, dice, que si el scroll es mayor de 250, añada al menu la clase fixed y al contenedor la clase margen, y en el momento que eso no sea cierto, quite dichas propiedades.

<script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">// <![CDATA[
$(window).scroll(function()
            {
                if ($(this).scrollTop() > 250){
					 $('#menu').addClass("fixed").fadeIn();
					 $('.contenedor').addClass("margen").fadeIn();
				}
                else {
					$('#menu').removeClass("fixed");
					$('.contenedor').removeClass("margen");
				}
            });
// ]]></script>

Espero que os haya sido de ayuda.