JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav>
        <div class="nav fixed">
            <ul>
                <li><img id="logo" src="http://www.minnetonka.k12.mn.us/Schools/MinnetonkaHighSchool/Vantage/VANTAGE-Project-Spotlight/PublishingImages/target%20logo.png" /></li>
                <li>About</li>
                <li>Roam</li>
            </ul>
        </div>
        <div class="navLong">
            <ul>
                <li><img src="http://www.frugalcouponliving.com/wp-content/uploads/2010/11/target-horizontal-logo.jpg" /></li>
                <li>About</li>
                <li>Roam</li>
            </ul>
        </div>
    </nav>
</header>

CSS

html body {
    height:1600px;
    width:100%;
}
li {
    display: inline;
    padding: 20px;
}

#logo {
    width:20px;
    height:20px;
}
img {
    width:100px;
    height:20px;
}

.nav {
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(169, 169, 169, 0.7);
}
.navLong {
    display:none;
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
.fixed {
    position:fixed;
}
header {
    background-color: rgba(0, 0, 0, 0.7);
    height: 200px;
    width:100%;
}

JavaScript

$(document).scroll(function () {
    var headerHeight = $('header').height(),
        s = $('.nav'),
        y = $(this).scrollTop();
    if (y > headerHeight) {
        $('.navLong').fadeIn();
        $('.nav').fadeOut();

    } else {
        $('.navLong').fadeOut();
        $('.nav').fadeIn();
    }
});