JSFiddle - React, Tailwind, and code Playground

by gbkim1988

HTML

<ul id="navigation">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
</ul>

<div id="section1" class="pageSection">
    <h2>Section 1</h2>
</div>
<div id="section2" class="pageSection">
    <h2>Section 2</h2>
</div>
<div id="section3" class="pageSection">
    <h2>Section 3</h2>
</div>
<div id="section4" class="pageSection">
    <h2>Section 4</h2>
</div>

CSS

body { 
    margin: 0;
    font-family: Arial, sans-serif;
}
#navigation {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 200px;
    background: #ffffff;
    box-shadow: 0 10px 10px -10px #000000;
}
#navigation > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navigation > li > a {
    margin: 1px;
    color: #000000;
    background: #cccccc;
    display: block;
    padding: 5px;
    text-decoration: none;
    transition: all 400ms;
}
#navigation > li > a.current,
#navigation > li:hover > a {
    background: #999999;    
}
.pageSection {
    min-height: 600px;
    padding: 20px;
    background: #dddddd;
}
.pageSection:nth-child(odd) {
    background: #eeeeee;
}
h2 {
    margin: 0;
}

JavaScript

// Changing menu dependent on section
$(window).scroll(function() {
    
    var windowTop = Math.max($('body').scrollTop(), $('html').scrollTop());
    
    $('.pageSection').each(function (index) {
        if (windowTop > ($(this).position().top - 100))
        {
            $('#navigation a.current').removeClass('current');
            $('#navigation a:eq(' + index + ')').addClass('current');
        }
    });
    
}).scroll();

// Page section scroll
$('#navigation a').click( function (e) {
    
    hrefString = $(this).attr('href').split('#');
    
    if ($(hrefString).size() > 1)
    {
        if ($('#' + hrefString[1]).size() > 0 )
        {
            e.preventDefault();
            $('html,body').animate({scrollTop: $('#' + hrefString[1]).offset().top}, 1000);
        }
    }
});