JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="nav-wrapper">
<nav id="navbar" class="pagenav navbar  scene_element scene_element--fadeindown scene_element--delayed">
  <div class="container">
    <div class="navbar-header">
		
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation" aria-expanded="false">
		  <div class="hamburger">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
			 </div>
		  <span class="menu-label">Menu</span>
      </button>
		
      <a class="navbar-brand" href="http://bl">title</a>
    </div>
  </div>
</nav>
</div>
<div class="content">
<div class="box">1
</div>
<div class="box">2
</div>
</div>
</div>
</div>
</div>

CSS

.nav-wrapper {
  min-height:50px
}

.affix.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.9em;
        background:red;

    border-bottom: 1px solid #f9f7f3;
    -webkit-box-shadow: 0px 0px 10px #00000017;
            box-shadow: 0px 0px 10px #00000017;
    -webkit-transition: margin-left .5s, font-size .5s, padding-top .5s, padding-bottom .5s;
    -o-transition: margin-left .5s, font-size .5s, padding-top .5s, padding-bottom .5s;
    transition: margin-left .5s, font-size .5s, padding-top .5s, padding-bottom .5s;
}

.navbar {
min-height: 50px;
    padding-bottom: 20px;
    border: 1px solid transparent;
    padding-top: 20px;
    right: 0;
    left: 0;
    top: 0;
    z-index: 99998;
    background:red;
}

.content {
  min-height:2000px;
}

.box {
  height:500px;
  background:blue;
  width:45%;
  float:left;
  margin:10px;
}

JavaScript

$('#navbar').affix({
	  offset: {
		top: 100,
	  }
	});