Different Header on scroll

Question

On my website I have a fixed Bootstrap header and I need this header to completely change its content when I scroll down (not just the css). I thought about doing it with CSS using display:none to hide the whole header and only show the other one when needed but I was wondering if there is another slightly better way.

UPDATE

Here its a piece of my code

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();
      }
    });
});

The onscroll works fine but the problem is that when refreshing the page both nav's are shown and I only want the fixed-nav to be shown. What am I missing?

UPDATE 2

Solved with CSS

#nav-fija {
    display: none;
}

Answer 1

I would use window.scrollY to get the current scroll position and render the content depends on the scroll position.