JSFiddle - React, Tailwind, and code Playground

HTML

<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>
            <div style="font-weight:bold; color:blue; font-size:x-large" id="magicnav">
                <p>totally cool stuff here</p>
            </div>
            <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 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 &...

JavaScript

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((docViewTop < elTop) && (docViewBottom > elBottom));
}
$('#magicnav').hide();
var intro = $('#intro');
$(document).ready(function () {
    if (intro.isScrolledIntoView()) {
        $('#magicnav').fadeOut();
    } else {
        $('#magicnav').fadeIn();
        }
    });