Blog Reacción Estudio

¡Tu zona de aprendizaje!

menujquery

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

  • Israel Piña Peña

    Siempre me gusta ayudar, mus buenos aportes amigo! solo que a la vez a novatos como yo se nos complica implementar tus aportes a nuestros codigos, yo pude hacer esto mismo muy sencillo, ahi para quien le sirva les dejo como lo hice:

    aclaro que dentro del header tengo todo mi menu, tan los botones (divs) y su respectivas imagenes (logo etc)

    Eso fue todo lo que hice, los br son para bajar todo el demas contenido ya que sin el se encima, en su caso pueden ser mas o menos br depende de lo alto de su menu. Saludos desde sonora mexico.

  • Luis Batista Tavarez

    y como hago que el menu teniendo posicion inicial en el tope de la pagina este no baje sino que se cree otro menu casi igual al bajar el scroll el primero desaparezca entonces aparece el segundo y sea el segundo que te acompañe hasta al final,entonces cuando vuelva y suba el scroll hasta el tope aparezca el primero y desaparezca el segundo?.Pero claro sin las caracteristicas del primero.

    Talvez entiendan lo que quiero.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR