Este tutorial sirve para mejorar mi anterior tutorial: mantener fijo el menú al hacer scroll.
En este caso no tenemos que añadir automáticamente medidas de margenes ni nada por el estilo. Ahora lo mantendrá fijo el menú al hacer scroll de manera automática, sin saltos.
PODEMOS VER UNA DEMO.
EL html
Lo primero que creamos será una estructura html:
<body>
<div class="header">
<h1>Tutorial mantener fijo el menú al hacer scroll mejorado</h1>
<h2>Unai Calleja, Diseñador Web Freelance</h2>
</div>
<div class="menu">esto sería el menú con sus enlaces</div>
<div class="wrapper">wrapper, aquí va el contenido. HAZ SCROLL, VERÁS QUE NO HACE SALTO</div>
</body>
Las propiedades css
Como podrás ver, a parte de los estilos propios de cada contenedor, tenemos un estilo «.fixed». Este estilo es muy importante de cara a que el efecto funcione. Le daremos una posicion fija con top=0.
body, html{ margin:0; padding:0;}
.header{ border-top:1px solid white;background:white; color:#333; height:150px; width:100%; font-family: 'Lobster', cursive; text-align:center}
.menu{ height:80px; width:100%; background:#333; color:white; text-align:center}
.wrapper{ height:2000px; width:100%; padding-top:20px}
.fixed{position:fixed; top:0}
El jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
posicionarMenu();
$(window).scroll(function() {
posicionarMenu();
});
function posicionarMenu() {
var altura_del_header = $('.header').outerHeight(true);
var altura_del_menu = $('.menu').outerHeight(true);
if ($(window).scrollTop() >= altura_del_header){
$('.menu').addClass('fixed');
$('.wrapper').css('margin-top', (altura_del_menu) + 'px');
} else {
$('.menu').removeClass('fixed');
$('.wrapper').css('margin-top', '0');
}
}
</script>
Como podrás ver, guardamos en una variable el alto del header y el menú, incluyendo padding.
Posteriormente le decimos que si el scroll vertical es mayor a la altura del header, le damos la propiedad fixed que hemos definido en las css anteriormente al menú, y añadimos un margen superior al wrapper por el valor de la altura del menú.
Si el scroll vertical es menor a la altura del header, quita la propiedad fixed al menú, y le da un margen superior de 0 al wrapper.
Esto es todo, como ves es muy fácil.
No dudes en comentar para cualquier duda y compartir el tutorial con tus amigos si te ha sido de utilidad
