Tengo un problema, estoy creando una pagina de scrolling, solo tienes que navegar para desplazarte y puedes clickear en el menu a la derecha que te dirije al ancla de la pagina, lo que quiero hacer es que cuando estes navegando por la pagina y entres una sección se resalte la respectiva ancla del menu a la derecha.
-
¿Quieres que se resalte cuando se pulse en el menú?¿O conforme vaya haciendo scroll el usuario?– Alvaro Montoro ♦Commented el 4 mar. 2016 a las 2:14
-
como implementas el menu? usas bootstrap?– Leandro TuttiniCommented el 4 mar. 2016 a las 2:50
-
En esta ocasión use materialize.css, quiero que se resalte conforme vaya haciendo scroll el usuario @AlvaroMontoro, y pues no tengo la mas minima idea de como comenzar, se usar Jquery pero aun estoy estudiando la manera de como resolver mi duda.– Alejandro TorresCommented el 4 mar. 2016 a las 4:06
-
¿Podrías añadir algo de código para mostrar cómo está estructurada la página y los elementos? No importa que no tenga contenido, Es solo para ver la estructura– Alvaro Montoro ♦Commented el 4 mar. 2016 a las 11:44
1 respuesta
Lo puedes hacer con JavaScript ejecutando un algoritmo como el siguiente cuando se haga scroll (y también cuando se cargue la página, para que se inicialicen los valores):
Obtén el valor del desplazamiento de la barra de scroll
Desactiva el menú que esté activo en el menú
Para las diferentes secciones enlazadas en el menú:
Calcula su posición desde el principio de la página
Calcula su altura
Si la sección está visible en el viewport (se puede saber a partir de los valores obtenidos en el punto 1, 3.1 y 3.2)
Activa el menú correspondiente en el menú
Sal del bucle para
Aquí dejo un ejemplo usando jQuery.
NOTA: Ten en cuenta que, como no se agregó código a la pregunta, yo he creado el mío propio que seguro diferirá del tuyo. Tendrás que adaptar el script de abajo a tu código.
function menuActivoConScroll(e) {
// desactiva todas las opciones del menú
$("#menu a").removeClass("active");
// obtén el valor del scroll
var scrollBar = $(window).scrollTop();
// selecciona como seccion activa la última
var activa = $(".seccion:last").attr("id");
// para todas las secciones
$(".seccion").each(function(indice) {
// obtén su posición y altura
var posTop = $(this).offset().top;
var altura = $(this).height();
// si está en el viewport, selecciona y para el bucle each
if (scrollBar < posTop + altura) {
activa = $(this).attr("id");
return false;
}
});
// activa la sección visible (la última por defecto)
$("#menu a[href='#" + activa + "']").addClass("active");
}
// ejecuta la función al cargar la página y cuando se haga scroll
$(window).scroll(menuActivoConScroll);
$(document).ready(menuActivoConScroll);
#menu {
width:200px;
position:fixed;
top:20px;
right:20px
}
#menu ul, #menu li {
list-style:none;
margin:0;
padding:0;
}
#menu li a {
display:block;
background:#eeeeee;
text-decoration:none;
height:30px;
line-height:30px;
border-left:6px solid #dddddd;
padding-left:5px;
}
#menu li a.active {
background: #f9f9f9;
border-left:6px solid #880000;
}
.seccion {
min-height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li><a href="#seccion1">Seccion 1</a></li>
<li><a href="#seccion2">Seccion 2</a></li>
<li><a href="#seccion3">Seccion 3</a></li>
<li><a href="#seccion4">Seccion 4</a></li>
</ul>
</div>
<div id="seccion1" class="seccion">
Seccion 1
</div>
<div id="seccion2" class="seccion">
Seccion 2
</div>
<div id="seccion3" class="seccion">
Seccion 3
</div>
<div id="seccion4" class="seccion">
Seccion 4
</div>
-
Esto fue de mucha ayuda, en efecto eso es lo que deseaba, ya pude aplicar eso a mi código, muchas gracias. Commented el 8 mar. 2016 a las 19:10