JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-header"></div>

<div class="nav-wrapper">
    <div class="nav">Navigation Bar</div>
</div>

<div class="page-content">
    <p>
Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.
    </p>

    <p>
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
    </p>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

.page-header {
    height: 200px;
    background: #CCC;
}

.nav-wrapper {
    height: 80px;
    background: #333;
}

.nav-wrapper .nav {
    height: 80px;
    background: #333;
    padding: 0 40px;
    line-height: 80px;
    color: #FFF;
}

.nav-wrapper .nav.fixed {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
}

.page-content {
    height: 1000px;
    padding: 40px;
}

JavaScript

// cache the element
var $navBar = $('.nav');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});