I want to use intersection observer in my project and I want to use jquery how intersection observer works in jQuery. I tried to pass jQuery element in the observe function but it didn't work.
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"));
You need to pass an actual element when calling observe(), and not a jQuery object. You can access the underlying element of a jQuery object by using .get() or [0]:
// Option 1:
aboutUsObserver.observe($("#about-us-section").get());
// Option 2:
aboutUsObserver.observe($("#about-us-section")[0]);
Even better: do you really need jQuery tho?
// Use document.querySelector
aboutUsObserver.observe(document.querySelector("#about-us-section"));
// Or use document.getElementById
aboutUsObserver.observe(document.getElementById("about-us-section"));
Just add [0] to the end of 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>