¡Espero que todos estén bien!

Estoy tratando de lograr algo simple, pero no sé cómo hacerlo exactamente. Estoy tratando de hacer una tabla de contenido fija, que resalte la sección activa.

El contenido:

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

La barra lateral:

 <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>

Como puedes ver, nada demasiado elegante. El problema es que traté de hacerlo con IntersectionObserver e intersectionRatio , y le da la clase .active a cada .content > div que ingresa a la pantalla.

Lo que me gustaría es un script en Javascript (o jQuery) que le dé la clase .active al elemento .content > div actual que alcance el límite de (por ejemplo) 20vh desde la parte superior de la pantalla.

Muchas gracias, espero haber sido lo suficientemente claro.