JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed" id="magicnav">
		<nav class="top-bar">
		  <ul class="title-area">
		    <!-- Title Area -->
		    <li class="name">
		      <h1><a href="#">Magic Nav:  Should be hidden until scroll</a></h1>
		    </li>
		    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
		  </ul>
		  <section class="top-bar-section">
		    <!-- Left Nav Section -->
		    <ul class="right">
		      
		      <li><a href="#">Services</a></li>
		     
		      <li><a href="#">Products</a></li>
		     
		      <li><a href="#">Contact Us</a></li>
		  	</ul>
		  </section>
		</nav>
	</div>
	<header class="row" id="intro">
		<hgroup class="small-12 columns">
			<h2 class="yellow">Software Solutions That Work</h2>
			<h1 id="logo">Intelligence Designs, LLC</h1>
			<div>
				<ul class="yellow uppercase no-bullet bigger">
					<li>Services</li>
					<li>Products</li>
					<li>Contact Us</li>
					<li>334-233-0561</li>
				</ul>

			</div>
		</hgroup>
	</header>
	<hr class="bigpurple" />
	<section class="yellowbg">
		<aside class="row">
			<h4 class="lowercase beige">some of our clients:</h4>
			<ul class="uppercase no-bullet bigger beige">
				<li>Alabama Department of Corrections</li>
				<li>Alabama Criminal Justice Information Center</li>
				<li>Alabama Administrative Office of the Courts</li>
				<li>Alabama Peace Officers Standards & Training</li>
				<li>Retirement Systems of Alabama</li>
			</ul>
		</aside>
<aside class="row">
			<h4 class="lowercase beige">some of our clients:</h4>
			<ul class="uppercase no-bullet bigger beige">
				<li>Alabama Department of Corrections</li>
				<li>Alabama Criminal Justice Information Center</li>
				<li>Alabama Administrative Office of the Courts</li>
				<li>Alabama Peace Officers Standards & Training</li>
				<li>Retirement Systems of Alabama</li>
			</ul>
		</aside>

		<aside class="row">
			<h4...

JavaScript

$("#magicnav").hide();
	$(
  function($)
  {
    $('#intro').bind('scroll', function()
                              {
                                if($(this).scrollTop() + 
                                   $(this).innerHeight()
                                   == $(this).scrollHeight)
                                {
                                  $("#magicnav").show();
                                }
                              })
  }
);