JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="mini-navbar" class="mini-navbar">
	  <div class="container-fluid">
		<div class="col-sm-12">
		  <span>Lorem Ipsum</span>
		  <a href=""><i class=""></i><span class="">mail</span></a>
		  <span class="phone">
              Phone 
		  </span>
		</div>
	  </div>
</div>
<div class="nav-container">
  <nav id="nav" class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <div id="hamburger-icon">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
             <li class=""><a href="" title="">Link1</a></li>
             <li class=""><a href="" title="">Link2</a></li>
             <li class=""><a href="" title="">Link3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>            <!-- Include the carousel template -->
             
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item">
          <img...

CSS

.test {
    height:1000px;
}

.nav-container{
    height:51px;
    position:relative;
   z-index:999;
}

JavaScript

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    var nav = $('.navbar');

    if (windscroll >= 20) {
        nav.addClass('navbar-fixed-top');
    } else {
        nav.removeClass('navbar-fixed-top');
    }

}).scroll();