I hope everyone is ok!

I'm trying to achieve something simple, yet I don't know how to do it exactly. I'm trying to do a fixed table of content, which highlights the active section.

The content:

<div class="content">
    <div id="step-1">
        ...
    </div>
    <div id="step-2">
        ...
    </div>
    <div id="step-3">
        ...
    </div>
</div>

The sidebar:

<nav>
    <a href="#step-1">
        <span>Step 1</span>
    </a>
    <a href="#step-2">
        <span>Step 2</span>
    </a>
    <a href="#step-3">
        <span>Step 3</span>
    </a>
</nav>

As you can see, nothing too fancy. The problem is that I tried to do it with IntersectionObserver and intersectionRatio, and it gives the .active class to every .content > div that enters the screen.

What I would like, is a script in Javascript (or jQuery) that gives the .active class to THE current .content > div element that reach the limit of (for example) 20vh from the top of the screen.

Thanks a lot, I hope I'm clear enough.