JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<header id="headerWrapper">
            <div id="headerContent">
                <nav>
                    <ul id="mainMenu"><!--Main Menu-->
                        <li><a class="active" href="#Index" id="index">Welcome</a></li>
                        <li><a href="#SectionA" id="sectionA">SectionA</a></li>
                        <li><a href="#SectionB" id="sectionB">SectionB</a></li>
                        <li><a href="#SectionC" id="sectionC">Contact</a></li>
                    </ul>
                </nav>

            </div>
        </header>

        <div id="page"><!--Main Container-->
            
            <div id="Index" class="wrapper">
                <div class="content">
                    
                </div>
            </div>  
            
            <div id="SectionA" class="wrapper">
                <div class="content">
                    
                </div>
            </div> 
            
            <div id="SectionB" class="wrapper">
                <div class="content">
                    
                </div>
            </div> 
            
            <div id="SectionC" class="wrapper">
                <div class="content">

                </div>
            </div>        
</div>

CSS

/*-- Reset Stylesheet Last Dated: 12.11.2013 | Version.2.0 --*/
 html, body, div, section, article, span, figure, figcaption, caption, img, h1, h2, h3, h4, h5, h6, p, a, button, blockquote, pre, abbr, address, small, strong, sub, sup, ol, ul, li, fieldset, form, label, input, output, textarea, legend, table, tr, th, td, footer, header, hgroup, aside, menu, nav, time, mark, audio, video, canvas, embed, iframe, object {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    cursor: default;
    max-width: 100%;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/*Remove default browser stylings*/
 :focus {
    outline: none
}
::-moz-focus-inner {
    border: 0
}
/*HTML5 display-role reset for older browsers*/
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img {
    display: block;
}
a, button {
    cursor: pointer;
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
/*Linked images*/
a img {
    cursor: pointer;
}
abbr {
    cursor: help;
}
input, textarea, address {
    cursor: text;
}
ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 15px;
}
ol {
    list-style-type: decimal;
    list-style-position: inside;
    margin-left: 15px;
}
ul ul, ol ul {
    list-style-type: circle;
    list-style-position: inside;
    margin-left: 25px;
}
ol ol, ul ol {
    list-style-type: lower-latin;
    list-style-position: inside;
    margin-left: 25px;
}
nav ul, nav ol {
    margin: 0;
    list-style-type: none;
}
sub, sup {
    font-size: 0.80em;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body {
    color: #4A4A4A;
    background-color:...

JavaScript

$(document).ready(function() {

    //Prevent clicking on .active links
    'use strict'; $('.active').click(function(a) {
        a.preventDefault();
    });
    
    //Menu Scrolling To Sections//
    $(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {
    
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        
        if (target.length) { 
            var topPadding = 50; 
        if($(window).width() > 1030) 
            topPadding = 80; 
        $('html,body').animate({ 
            scrollTop: target.offset().top - topPadding }, 700);
        return false;
        }}});
    });
   
   
    $(window).scroll(function(){ 
    var scrollHeight = $(window).scrollTop() + 200; 
        
    var index = $('#Index').offset().top; 
    var sectionA = $('#SectionA').offset().top; 
    var sectionB = $('#SectionB').offset().top; 
    var sectionC = $('#SectionC').offset().top; 
        
        $('#mainMenu li a').removeClass('active'); 
        
        if(scrollHeight >= index && scrollHeight < sectionA) 
        $('#index').addClass('active'); 
        
        if(scrollHeight >= sectionA && scrollHeight < sectionB) 
        $('#sectionA').addClass('active'); 
        
        if(scrollHeight >= sectionB && scrollHeight < contact) 
        $('#sectionB').addClass('active'); 
        
        if(scrollHeight >= sectionC) 
        $('#sectionC').addClass('active'); 
    });


});