Estoy desarrollando un sitio, donde el nav tiene un top de 35% por que va sobre una imagen de fondo debajo del logo. Quiero que ese nav al scrollear se pegue al top, pero si no scrollea se mantenga en esa posición. Ya probé varias cosas y tengo dos problemas: -cuando agrego el fixed-top se posiciona debajo de la imagen de fondo -si le pongo el top que necesito como posición original, se queda fijo en esa posición cuando hago scroll en lugar de ir al top. No se mucho de js quizas haya alguna forma de controlarlo. Este es el header
<header class="header">
<div class="image_container" class="container-fluid">
<img src="/img/inicio.png" alt="masaje thailandes, masajista">
</div>
<div class="logo__container" class="container-fluid">
<img src="/img/logo_blanco.svg"
alt="solsticiothai, masaje thailandes, pablo walrron, yoga, clases, entrenamiento">
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav w-100 justify-content-between">
<li class="nav-item active">
<a class="nav-link" href="#masajethai">Masaje Thai </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#beneficios">Beneficios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sobremi">Sobre Mi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicios">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</header>