Quiero usar el observador de intersección en mi proyecto y quiero usar jquery cómo funciona el observador de intersección en jQuery. Traté de pasar el elemento jQuery en la función de observación pero no funcionó.
const aboutUsObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting) { $(".active").removeClass("underlined"); $("#aboutUsNavItem").toggleClass("underlined"); } else { $(".active").removeClass("underlined"); } }); }, {}); aboutUsObserver.observe($("#about-us-section"));Debe pasar un elemento real al llamar a observe() , y no un objeto jQuery. Puede acceder al elemento subyacente de un objeto jQuery usando .get() o [0] :
// Option 1: aboutUsObserver.observe($("#about-us-section").get()); // Option 2: aboutUsObserver.observe($("#about-us-section")[0]);Aún mejor: ¿ realmente necesitas jQuery aunque?
// Use document.querySelector aboutUsObserver.observe(document.querySelector("#about-us-section")); // Or use document.getElementById aboutUsObserver.observe(document.getElementById("about-us-section"));Simplemente agregue [0] al final del selector.
const aboutUsObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting) { console.log("Here!") $(".active").removeClass("underlined"); $("#aboutUsNavItem").toggleClass("underlined"); } else { $(".active").removeClass("underlined"); } }); }, {}); aboutUsObserver.observe($("#about-us-section")[0]); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="about-us-section" style="position:absolute; top:1000px">test</div>