Skip to main content
3 de 3
se añadieron 204 caracteres en el cuerpo
Lobos
  • 16.4k
  • 3
  • 14
  • 31

//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>

Lobos
  • 16.4k
  • 3
  • 14
  • 31