Blog Reacción Estudio

¡Tu zona de aprendizaje!

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.

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 con la posición fija.

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>

Ver ejemplo