JSFiddle - React, Tailwind, and code Playground

HTML

<header class="row" id="intro" style="background:yellow;">
    <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...

CSS

#magicnav{
    display: block;
    width: 100%;
    background-color: red;
    height: 20px;
    position:fixed;
    top: 0;
}

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 < elemBottom) && (docViewBottom > elemTop));
}
$('#magicnav').hide();
var intro = $('#intro');
$(window).on('scroll', function(){
     if (isScrolledIntoView(intro)) {
         console.log('a');
        $('#magicnav').fadeOut();
    } else {
        console.log( 'b');
        $('#magicnav').fadeIn();
       }
    });