How to update menu when scrolling website content or reach a particular div

Here is an example: https://www.msdmanuals.com/professional/pulmonary-disorders/diagnostic-and-therapeutic-pulmonary-procedures/bronchoscopy?query=bronchoscopy

Basically it displays a menu with links to parts of the page that get highlighted as the user scrolls past them. How to highlight the menu? How to achieve this in HTML, CSS or JavaScript?

Sample code of HTML:

<section id="main">
    <div class="target" id="1">TARGET 1</div>
    <div class="target" id="2">TARGET 2</div>
    <div class="target" id="3">TARGET 3</div>
    <div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
    <nav>
        <a href="#1" class="active">Punkt 1</a>
        <a href="#2">Punkt 2</a>
        <a href="#3">Punkt 3</a>
        <a href="#4">Punkt 4</a>
    </nav>
</aside>