JSFiddle - React, Tailwind, and code Playground

HTML

<img class="imgTopo" src='https://static.cineclick.com.br/sites/adm/uploads/banco_imagens/31/602x0_1439644246.jpg'/>
<!-- Desktop navigation -->
<div id="masthead">
  <div id='navbar' class="container">

    <a id="menu-switch" class="toggleMenu" href="#mobile-menu"><span></span> Menu</a>

    <div id="logo">
      <a href="/">

      </a>
    </div>
    <div id="mastblock">


      <!-- New menu-->
      <div class="main-nav">
        <div class="nav-container">
          <ul id="main-menu" role="navigation" class="main-menu">
            <li class=""><a href="#" accesskey="1">teste</a>

            </li>
          </ul>
        </div>
      </div>

    </div>
    <div class="clear">&nbsp;</div>
  </div>
</div>


<!-- Mobile navigation -->
<div class="main-nav">
  <div class="container">

  </div>
  <div id="mobile-menu">
    <ul id="main-menu-mobile" class="main-menu-mobile">
      <li>
        <a href="#" title="teste" accesskey="2">teste</a>
        <ul>

          <li>
            <a href="#">sub1</a>
          </li>

        </ul>
      </li>

    </ul>
 ...

CSS

.fixed-menu {
  position:fixed;
  background:red;
  z-index:9999;
  width: 100% !important;
  top:0;
  left:0;
}

JavaScript

alturaImg = $('.imgTopo').height();
$(window).on('scroll', function() {
  if($(window).scrollTop() < alturaImg) {
    $('#navbar').removeClass('fixed-menu');
    return;
  }
  $('#navbar').addClass('fixed-menu');
});