Intersection Observer Not Triggering Section Linked To From Other Page

Question

I have set up the Intersection Observer API on my home page. I have sections with ids that are linked to from the navigation menu. Each section successfully triggers the Intersection Observer callback as it is scrolled to from the page when clicked.

I link to these same sections from other pages in the navigation menu however when one of these links is clicked, the section on the home page is navigated to but the Intersection Observer callback is not executed.

Here's an example of the navigation link: index.html#about-us

The Intersection Observer Code:

var aboutUs = document.querySelector('#about-us');

var observer = new IntersectionObserver(function(entries) {
        if(entries[0].isIntersecting === true) {
            entries[0].target.style.opacity = '1';
        }
    }, { threshold: [0.5] });

observer.observe(aboutUs);

If anyone has any experience with this please let me know.

Answer 1

I found a solution. Checking the window.scrollY position in a conditional and then executing code for that section:

if (window.scrollY > 1700 && window.scrollY < 1800) {
        for (let i = 0; i < serviceDivs.length; i++) {
            var el = serviceDivs[i];
            el.style.opacity = '1';
        }
    }