JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

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 id="contentcontainer">
    <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>
</div>

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0;
}
#contentcontainer {  height:600px;  overflow:auto; } 
#header {
    height: 60px;
    background: pink;
    float: left;
    width: 100%;
}
.jumbo {
    background: brown;
    background-attachment: fixed;
}
.fullheight {
    height: 100%;
}
.midheight {
    height: 200px;
}
#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: teal;

}
.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}, 1500);
    });



});