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');
        $('html, body').animate({
            scrollTop: $(divId).offset().top;
        }, 500);
});



});