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 {
    padding-top: 100px;
}

.navbar {
    min-height: 50px;
    z-index: 99998;
    background:red;
    width:100%;
    position: fixed;
    transition: all .5s;
    top: 0;
}

.affix-top.navbar {
    padding-bottom: 20px;
    border: 1px solid transparent;
    padding-top: 20px;
}

.affix.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.9em;
    border-bottom: 1px solid #f9f7f3;
    transition: all .5s;
}

.content {
  min-height:2000px;
}

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

JavaScript

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