Cómo crear un menú que se mueve al hacer scroll con jQuery
Muchos sitios web tienen distintos menús que nos acompañan al hacer scroll (o desplazarnos) por la página, ya sea el menú principal, el menú de identificarnos o registrarnos como usuario, publicidad, etc.
Estos menús al principio se encuentran en una posición fija, pero cuando estamos a punto de perderlos de vista nos persiguen hasta el final de la página.
Por ejemplo, el menú de Google Analytics:
El menú de Google Analytics con la posición fija.
Pero cuando hacemos scroll hacia abajo y el menú está a punto de desaparecer, éste nos sigue al desplazarnos.
El menú de Google Analytics nos sigue cuando hacemos scroll.
Además, si hemos ido al final de la página y volvemos a subir al principio, el menú al llegar a su posición inicial se quedará fijo hasta que volvamos a desplazarnos más abajo en la página.
Este efecto lo podemos hacer en unos sencillos pasos con CSS y jQuery
HTML
<div></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Ponemos muchos saltos de líneas para poder apreciar este efecto.
CSS
body{
margin:0;
}
div{
margin-top:100px;
height:100px;
width:100%;
background-color:#000;
}
jQuery
Importante: Debemos tener nuestra librería jQuery cargada.
$(document).ready(function(){
var altura = $("div").offset().top;
$(window).scroll(function(){
if($(window).scrollTop() >= altura){
$("div").css("margin-top","0");
$("div").css("position","fixed");
}else{
$("div").css("margin-top","100px");
$("div").css("position","static");
}
});
});
El código completo
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var altura = $("div").offset().top;
$(window).scroll(function(){
if($(window).scrollTop() >= altura){
$("div").css("margin-top","0");
$("div").css("position","fixed");
}else{
$("div").css("margin-top","100px");
$("div").css("position","static");
}
});
});
</script>
<style>
body{
margin:0;
}
div{
margin-top:100px;
height:100px;
width:100%;
background-color:#000;
}
</style>
</head>
<body>
<div></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>