JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jumbo midheight">test
    <br />test</div>
<div id="select">
    <div class="container">
<a href="#posting" class="nav">posting</a>

<a href="#distribution" class="nav">distribution</a>

<a href="#application" class="nav">applicantions</a>

    </div>
</div>
<div class="section" id="posting">1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>1
    <br>
</div>
<div class="section" id="distribution">2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>2
    <br>
</div>
<div class="section" id="application">3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>3
    <br>
</div>

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0;
}
#header {
    height: 60px;
    background: pink;
    float: left;
    width: 100%;
}
.jumbo {
    background: brown;
    background-attachment: fixed;
}
.fullheight {
    height: 100%;
}
.midheight {
    height: 400px;
}
#select {
    height: 60px;
    background-color:yellow;
    width:100%;
}
.container {
    width: 780px;
    margin:0px auto;
}
#application {
    background-color: green;
}
#distribution {
    background-color: pink;
}
#posting {
    background-color: blue;
}
.active {
    background-color: red;
}

JavaScript

$(function () {

    var $select = $('#select');
    var $window = $(window);
    var isFixed = false;
    var init = $select.length ? $select.offset().top : 0;

    $window.scroll(function () {
        var currentScrollTop = $window.scrollTop();
        if (currentScrollTop > init && isFixed === false) {
            isFixed = true;
            $select.css({
                top: 0,
                position: 'fixed'
            });
            console.log("fixed");
        } else if (currentScrollTop <= init && isFixed === true) {
            isFixed = false;
            $select.css('position', 'relative');
            console.log("unfixed");
        }
    });

    $(".nav").click(function (e) {
        e.preventDefault();
        var divId = $(this).attr('href');
        $('body').animate({
            scrollTop: $(divId).offset().top
        }, 500);
    });



});