JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="height:100px; background-color:red;">
header
</div>


  <nav id="fixedbar">
    <ul id="fixednav">
      <li><a href="#">Homepage</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Community</a></li>
      <li><a href="#">Staff Members</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
    
    <div id="content">
      <h2>Content headline</h2>
      <p>Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>. Logo Icon freebie released by <a href="http://365psd.com/day/176/">Pontus Johansson</a>.</p>
      
      <p>I've used one adjective to describe myself. What is it? Professional. Yeah, like I'm going to spill coffee all over this $3,000 suit? Come on! It's not like envy, or even hungry!</p>
      
      
  


    
    <nav id="navigation">
      <ul>
        <li><a href="#">Homepage</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Staff Members</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
      
      <p>It's so watery. And yet there's a smack of ham to it. George Michael may be suffering from what we in the soft-sciences call Obsessive Compulsive Disorder, or the "OC Disorder." Dad would stage elaborate situations using a one-armed man to teach us lessons. I'd want to get in there and find some answers.</p>
      
      <h3>Another Top Heading</h3>
      <p>These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. I run a pretty tight ship around here. With a pool table? It's a gaming ship.</p>
      
      <p>Absolutely. And we're going to be here every day. I don't care if it takes from now till the end of Shrimpfest. Look at us, crying like a bunch of girls on the last day of camp.</p>
      
      <p>No borders, no limits… go ahead, touch the Cornballer... you...

CSS

html { height: 101%; }

ol, ul { list-style: none; }

/* top navigation */
#navigation {
  width:100%;
  display: block;
  height: 35px;
  background-color: #131313;
}

#navigation ul { list-style: none; padding: 0px 7px; }

#navigation ul li { display: inline; float: left; }

#navigation ul li a { 
  display: block; 
  padding: 0 8px; 
  color: #fff;
  font-size: 1.1em;
  text-decoration: none;
  line-height: 35px; 
  font-weight: bold; 
  margin-right: 6px;

}
#navigation ul li a:hover { color: #a8d6e7; }

/* hidden fixed navigation */
#fixedbar { 
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: rgba(0,0,0,0.85);
}

#fixednav { 
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0px 25px;
}

#fixednav li { }

#fixednav li a {
  display: block;
  float: left;
  font-size: 1.25em;
  font-weight: bold;
  color: #96aed8;
  line-height: 80px;
  text-decoration: none;
  padding: 0px 8px;
  margin-right: 6px; 
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear; 
}

#fixednav li a:hover {
  color: #fff;
  background: rgba(0,0,0,0.3);
}

JavaScript

$(document).ready(function(){
  $('#navigation a, #fixedbar a').on('click', function(e) {
    e.preventDefault();
  });
  
  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    var $nav = $("#navigation");
    if(scrolltop >= $nav.offset().top + $nav.height()) {
      $('#fixedbar').fadeIn(250);
    }
    else {
      $('#fixedbar').fadeOut(250);
    }
  });
});