'Intersection Observer for handling active state in navigation : problem with sections that are not tall enough

Working on my personal website, I am trying to implement the Intersection Observer API for navigation items active state management, such as the example we see here : http://intersection-scrollspy.surge.sh/

The problem is that, contrary to the demo where each section is equally tall / or is at least 100vh tall, I have sections that vary in size. In fact, the two last sections on my page are not tall enough when you zoom out the page, which screws the Observer mechanism... (Basically my last two sections are never "observed" and so the active states are never triggered for last two items of the navigation menu). This is problematic for higher resolution screens (or when a user just decides to zoom out the content) ...

I've tried to find a solution to that problem, but I am literraly stuck ... However I know that a solution must exist because this example website (https://prorez.caliberthemes.com/resume/) found a solution which works no matter what the zoom on the page is (it does not use the intersection observer though, if I am not mistaken) ...

Do you have any idea how I could solve that issue?

Thanks a lot



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source