En mi sitio web tengo un encabezado fijo de Bootstrap y necesito que este encabezado cambie completamente su contenido cuando me desplazo hacia abajo (no solo el css). Pensé en hacerlo con CSS usando display:none para ocultar todo el encabezado y solo mostrar el otro cuando sea necesario, pero me preguntaba si hay otra forma un poco mejor.

ACTUALIZAR

Aquí está una parte de mi código

HTML

 <nav id="nav-estatica" class="navbar navbar-expand-md navbar-dark fixed-top"> MY CONTENT </nav> <nav id="nav-fija" class="navbar navbar-expand-md navbar-dark fixed-top"> ANOTHER DIFFERENT CONTENT </nav>

JS

 $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 200) { $('#nav-estatica').fadeOut(); $('#nav-fija').fadeIn(); } else { $('#nav-fija').fadeOut(); $('#nav-estatica').fadeIn(); } }); });

El desplazamiento funciona bien, pero el problema es que al actualizar la página se muestran ambos navegadores y solo quiero que se muestre el navegador fijo. ¿Qué me estoy perdiendo?

ACTUALIZAR 2

Resuelto con CSS

 #nav-fija { display: none; }