JSFiddle - React, Tailwind, and code Playground

by functionalcss

HTML

<script src="https://raw.githubusercontent.com/teamdf/jquery-visible/master/jquery.visible.js"></script>
<div class = "wrapper">
    <header>Header</header>
    <main>
        <nav>Stick to top</nav>
        Content
    </main>
    <footer>Footer</footer>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e2e2e2;
    padding: 20px;
}

.wrapper > header,
.wrapper > footer {
    font: 20px/2 Sans-Serif;
    text-align: center;
    background-color: #0040FF;
    color: #fff;
}

.wrapper > main {
    position: relative;
    height: 1000px;
    background-color: #5e5e5e;
    font: 20px/1000px Sans-Serif;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.wrapper > main > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font: 20px/2 Sans-Serif;
    color: #fff;
    text-align: center;
    background-color: #FFBF00;
}

JavaScript

$(function() {
    $(window).scroll(function() {
        $(".wrapper > header").visible() ?
            alert("VISIBLE") :
            $(".wrapper > main > nav").css({
                "position": "fixed",
                "top": "0"
            });
    });
});