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"));

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"));

• javascript
• jquery

Share Improve this question Follow edited Aug 4, 2021 at 6:46 mohammadyahyaq asked Aug 4, 2021 at 6:11 mohammadyahyaqmohammadyahyaq 8311 silver badge99 bronze badges 2

• 1 You are missing either a # or . in $("aboutUsNavItem") – Carsten Løvbo Andersen Commented Aug 4, 2021 at 6:14
• I have added it in the question, thank you – mohammadyahyaq Commented Aug 4, 2021 at 6:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about-us-section" style="position:absolute; top:1000px">test</div>