Tengo un par de enlaces ancla que se desplazan a las tarjetas de contenido:

 <nav class="bg-light p-4 d-flex justify-content-between"> <div class="anchor-buttons"> <a href="#c1" class="btn btn-outline-primary">Content 1</a> <a href="#c2" class="btn btn-outline-primary">Content 2</a> </div> </nav> <section class="p-5"> <div class="card my-5 p-5" id="c1">Content 1</div> <div class="card my-5 p-5" id="c2">Content 2</div> </section>

La tarjeta a la que se ha navegado se resalta al darle una clase activa:

 function highlightCard() { $(".anchor-buttons a").on("click", function () { var id = $(this).attr("href"); $(".active").removeClass("active"); // remove existing active $(id).addClass("active"); // set current link as active observeCard(); }); }

A continuación, quiero eliminar la clase, cuando el elemento se desplaza fuera de la ventana gráfica.

Intenté usar este código, pero no sé cómo conectarlo a la otra función. Cuando la tarjeta de destino no está a la vista, el observador de la intersección la elimina justo después de que se haya agregado mediante un clic.

 function observeCard() { const el = document.querySelector(".active"); const observer = new window.IntersectionObserver( ([entry]) => { console.log(entry.boundingClientRect.top); if (entry.isIntersecting) { console.log("Enter"); return; } console.log("Leave"); $(".active").removeClass("active"); if (entry.boundingClientRect.top > 0) { // do things if below } else { // do things if above } }, { root: null, threshold: 0 } ); observer.observe(el); }

Caja de arena: https://codesandbox.io/s/long-platform-30qjk?file=/index.html:2095-2109

¡Gracias por cualquier sugerencia!