1

En mi sitio tengo la etiqueta nav y en su interior lo siguiente

                    <ul>
                        <li class="current">
                            <a href="#inicio" data-scrollto="#inicio">
                                <div>Inicio</div>
                            </a>
                        </li>
                        <li>
                            <a href="#trabajos" data-scrollto="#trabajos">
                                <div>Trabajos</div>
                            </a>
                        </li>
                        <li>
                            <a href="#about" data-scrollto="#about">
                                <div>Quienes Somos</div>
                            </a>
                        </li>


                        <li>
                            <a href="#msj" data-scrollto="#msj">
                                <div>Mensajeanos</div>
                            </a>
                        </li>
                    </ul>

Hay una clase current que le dá un color de fondo distinto al elemento de la lista (en este caso a Inicio). Yo quisiera que esta clase se vaya colocando en los distintos elementos del menú (en el que corresponda) cuando hago scroll por la pagina y voy pasando por las distintas secciones.

Alguna idea de como podría hacerlo? Muchas gracias

2
  • Tienes que saber cada uno de los bloques cual es su coodenada superior scrollTop property, y despues por javascript añades un listener para el scroll. Ahí capturas el scroll de la pantalla y según el resultado cambias la clase al elemento que corresponda. Espero pilles la idea. saludos! Commented el 4 abr. 2020 a las 17:07
  • 1
    ahi va! Existia una propiedad que te devuelve la posicion del section!! Era lo que necesitaba :)
    – Agustin G.
    Commented el 4 abr. 2020 a las 17:12

1 respuesta 1

2

//IntersectionObserver permite configurar una función callback 
//que es llamada cada vez que un elemento, llamado target, 
//intersecta con otro, bien el viewport o un elemento específico

var observer = new IntersectionObserver(function(entries) {
	if(entries[0].isIntersecting)
	{
           asignarClase(entries[0].target);
         }

//el valor threshold indica que porcentaje del elemento debe estar 
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc

}, { threshold: [0.1] });

//agregar aquí los selectores de los elementos a observar en el scroll

observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));



function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");

//actualizar clase current
elementosMenu.forEach(e => {
  //extraer el valor del  href del elemento del menu
  valorhref = e.href.split("#")[1]
  //si el valor del href es igual al id del target agregar
  //clase current
 if(valorhref === target.id){
    e.parentNode.classList.add("current");
 }else{
  //si el valor no es igual remover clase current
  e.parentNode.classList.remove("current");
 }
 
})




}
.current{
     background-color:lightblue;
}

.main{
    width: 100%;
    height: 200px;
    overflow-y: scroll;
}
<ul>
    <li class="current">
       <a href="#inicio" data-scrollto="#inicio">
           <div>Inicio</div>
       </a>
     </li>
     <li>
        <a href="#trabajos" data-scrollto="#trabajos">
           <div>Trabajos</div>
        </a>
     </li>
     <li>
         <a href="#about" data-scrollto="#about">
            <div>Quienes Somos</div>
         </a>
     </li>
     <li>
        <a href="#msj" data-scrollto="#msj">
            <div>Mensajeanos</div>
        </a>
      </li>
  </ul>
                    
<div  class="main">

<div id="inicio" style="background-color:yellow; height:300px">
</div>

<div id="trabajos" style="background-color:blue;height:300px">
</div>

<div id="about" style="background-color:red;height:300px">
</div>




</div>

3
  • Impecable, muchas gracias
    – Agustin G.
    Commented el 4 abr. 2020 a las 17:37
  • Por favor considera argumentar un poco tu respuesta. Responder sólo con código se considera de baja calidad. Puedes repasar Cómo responder. Saludos Commented el 4 abr. 2020 a las 18:21
  • Los comentarios están dentro del código.
    – Lobos
    Commented el 4 abr. 2020 a las 18:31

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.