CSS - menu staying on top, current submenu active when scrolling - css

Question

It is a bit complicated to tell when I am trying to do so I add a drawing ;) I hope it's clear enough
I want the menu to go on the top and stay here when going down, but this only after the header has been scrolled to its bottom.
I am using bootstrap and also wonder how to make the selected submenu as active when I scroll to it
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
</li>
</ul>
</div>
</nav>
<div style="margin: 2em;"></div>
</div>

Answer 1

You should use position: sticky; to achieve this type of navigation menu. Click on below website to read more in details.
Open this site

Answer 2

I hope this is what u r expecting check my answer.
just add the below given css properties to nav bar:
position:sticky;
top:0;
z-index:1;
NOTE: check out my answer in full screen mode. Because According to u r code navbar appears only in large screens
Demo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<p>some text</p>
<p style="margin-top:100px;">some text</p>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important;position:sticky; top:0;z-index:1;">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
</li>
</ul>
</div>
</nav>
<div style="margin: 2em;"></div>
<div class="jumbotron text-center">
<h1>some contents </h1>
<p>lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<div class="container">
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
</div>