JSFiddle - React, Tailwind, and code Playground

by Deridjian

HTML

<section id="home">
    <span id="spacer"></span>
    <h1>Home</h1>
    <nav>
        <a href="#one">Link One</a>
        <a href="#two">Link Two</a>
        <a href="#three">Link Three</a>
        <a href="#four">Link Four</a>
    </nav>
</section>

<section id="one">
    <h1>One</h1>
</section>

<section id="two">
    <h1>Two</h1>
</section>

<section id="three">
    <h1>Three</h1>
</section>

<section id="four">
    <h1>Four</h1>
</section>

<section id="last">
    <h1>Last</h1>
</section>

CSS

body{
    font-family: sans-serif;
}
section{
    min-height: 600px;
    background-color: #02658C;
    color: white;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
section:first-of-type{
    justify-content: space-between;
}
#spacer{
    display: block;
    min-height: 2em;
}
nav{
    padding: 1em 0;
}
nav a{
    color: #02658C;
    padding: 0 .5em;
}
section:nth-of-type(odd){
    background-color: #333
}
.active{
    color: #F2505E !important;
}
.sticky{
    position: fixed;
    top: 0;
    background-color: #fff;
    width: 100%;
}

JavaScript

// Let DOM finish loading
$(window).load(function() {
    // CSS animation hack
    $('body').removeClass('preload')
    // Sticky nav and active class
    var win = $(window),
        doc = $(document),
        sec = $('section'),
        nav = $('nav'),
        anc = $('nav a'),
        pos = nav.offset().top,
        // Fill array with top offsets from section
        arr = sec.map(function() {
                  return $(this).offset().top;
              }).get(),
        // Make function to add/remove active class
        act = function() {
                  var t = win.scrollTop();
                  t > pos ? nav.addClass('sticky')
                  : nav.removeClass('sticky'),
                  $.each(arr, function(i, val) {
                      (t >= val && t < (val + sec.eq(i).outerHeight(true) )) ? anc.eq(i-1).addClass('active')
                      : anc.eq(i-1).removeClass('active')
                  })
              };
    // uncomment alert for debugging
    // alert(arr)
    // Execute sticky function
    win.scroll(act)
    // Smooth scroll
    var $root = $('html, body');
    $('a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 800);
        return false;
    });
})