1

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.

4
  • ¿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? Commented 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. Commented 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 1

0

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):

  1. Obtén el valor del desplazamiento de la barra de scroll

  2. Desactiva el menú que esté activo en el menú

  3. Para las diferentes secciones enlazadas en el menú:

    1. Calcula su posición desde el principio de la página

    2. Calcula su altura

    3. 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)

      1. Activa el menú correspondiente en el menú

      2. 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>

1
  • 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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.