JSFiddle - React, Tailwind, and code Playground

HTML

<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;
    }
    
    .wrapper > header,
    .wrapper > footer {
        font: 20px/2 Sans-Serif;
        text-align: center;
        background-color: #0040FF;
        color: #fff;
    }
    
    .wrapper > main {
        position: relative;
        height: 500px;
        background-color: #5e5e5e;
        font: 20px/500px 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;
    }
    
    .wrapper > main > nav.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

JavaScript

(function($){
    
        /**
         * Copyright 2012, Digital Fusion
         * Licensed under the MIT license.
         * http://teamdf.com/jquery-plugins/license/
         *
         * @author Sam Sehnert
         * @desc A small plugin that checks whether elements are within
         *       the user visible viewport of a web browser.
         *       only accounts for vertical position, not horizontal.
         */
        var $w = $(window);
        $.fn.visible = function(partial,hidden,direction){
    
            if (this.length < 1)
                return;
    
            var $t        = this.length > 1 ? this.eq(0) : this,
                t         = $t.get(0),
                vpWidth   = $w.width(),
                vpHeight  = $w.height(),
                direction = (direction) ? direction : 'both',
                clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
    
            if (typeof t.getBoundingClientRect === 'function'){
    
                // Use this native browser method, if available.
                var rec = t.getBoundingClientRect(),
                    tViz = rec.top    >= 0 && rec.top    <  vpHeight,
                    bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
                    lViz = rec.left   >= 0 && rec.left   <  vpWidth,
                    rViz = rec.right  >  0 && rec.right  <= vpWidth,
                    vVisible   = partial ? tViz || bViz : tViz && bViz,
                    hVisible   = partial ? lViz || rViz : lViz && rViz;
    
                if(direction === 'both')
                    return clientSize && vVisible && hVisible;
                else if(direction === 'vertical')
                    return clientSize && vVisible;
                else if(direction === 'horizontal')
                    return clientSize && hVisible;
            } else {
    
                var viewTop         = $w.scrollTop(),
                    viewBottom      = viewTop + vpHeight,
                   ...