JSFiddle - React, Tailwind, and code Playground

by Jeff Borg

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<header>
    <div id="header">
        <div id="logo">
            <a href="index.html">
                <span>
                    LOGO
                </span>
            </a>
        </div>
    </div>
</header>

<body>
    <div id="wrapper">
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>

    </div>

</body>

CSS

header {
    padding: 5px 0 0 0;
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 999;
    background: rgba(0, 0, 0, 0) 10%;
}

header.full {
    height: 100px;
    background: rgba(27, 39, 53, 1) 10%;
}

body {
    background-color: green;
    padding: 0px;
    margin: 0px;
    height: 1000px;
}

#wrapper {
    padding-top: 120px;
}

JavaScript

$(document).ready(function() {
    /*
    	navOffset - The distance in which to trigger the events
    	scrollPos - The position Y that the page has been scrolled
    */

    var navOffset = 5 /*$("header").offset().top;*/

    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop();
        $("header").stop(true);
        if (!$("header").hasClass("full") || scrollPos < navOffset) {
            if (scrollPos > navOffset) {
                $("header").fadeTo(200, 0, function() {
                    $("header").addClass("full");
                });
                $("header").fadeTo(200, 1);
            } else {
                $("header").fadeTo(200, 0, function() {
                    $("header").removeClass("full");
                });
                $("header").fadeTo(200, 1);
            }
        }
    });
});