JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="nav-container">
    <div class="nav" id="menu_nav">
        <div class="container-width">
            <div class='myList'> <a id="menu1">Menu1</a>
 <a id="menu2">Menu2</a>
 <a id="menu3">Menu3</a>
 <a id="menu4">Menu4</a>

            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="grid g-1" id="g-1"></div>
<div class="grid g-2" id="g-2"></div>
<div class="grid g-3" id="g-3"></div>
<div class="grid g-4" id="g-4"></div>

CSS

/* MENU */
 .nav-container {
    width: 100%;
    position: absolute;
    z-index: 3;
    top: 100%;
    margin-top: -80px;
    background: #000;
}
.f-nav {
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    margin-top: 0;
}
.nav {
    width:100%;
    height: 80px;
}
.myList {
    width: 100%;
    height:auto;
    float: right;
    padding: 27px 0px 0 0;
    text-align: right;
}
.myList a {
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    margin: 0 25px 0 0;
    cursor: pointer;
}
.myList .active {
    cursor:pointer;
    font-weight: 400;
    color: #9AB948;
}
/* GRIDS */
 .grid {
    width: 100%;
    position: absolute;
    float: left;
}
.g-1 {
    height: 100%;
    background:green;
}
.g-2 {
    height: 100%;
    background: red;
    color:#000;
    top:100%;
    padding: 10px 0;
    text-align: center;
}
.g-3 {
    height: 100%;
    overflow:hidden;
    background: blue;
    top:200%;
}
.g-4 {
    height: 100%;
    background: orange;
    top:300%;
}

JavaScript

jQuery("document").ready(function ($) {
    var nav = $('.nav-container');
    $(window).scroll(function () {

        if ($(this).scrollTop() > $(window).height() - $('#menu_nav').height()) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }

        $('.grid').each(function () {
            if ($(window).scrollTop() > $(this).position().top - ($(this).height() / 2)) {
                $('.myList a').removeClass('active');
                $('.myList a#menu' + $(this).attr('id').split('-')[1]).addClass('active');
            }
        });
    });
});


$(document).ready(function () {

    var menuHeight = $('#menu_nav').height() - 2;

    $("#menu1").click(function () {
        $('html, body').animate({
            scrollTop: $("#g-1").offset().top - menuHeight
        }, 1000);
        $('.myList a').removeClass('active');
        $('.myList #menu1').addClass('active');
    });

    $("#menu2").click(function () {
        $('html, body').animate({
            scrollTop: $("#g-2").offset().top - menuHeight
        }, 1000);
        $('.myList a').removeClass('active');
        $('.myList #menu2').addClass('active');
    });

    $("#menu3").click(function () {
        $('html, body').animate({
            scrollTop: $("#g-3").offset().top - menuHeight
        }, 1000);
        $('.myList a').removeClass('active');
        $('.myList #menu3').addClass('active');
    });

    $("#menu4").click(function () {
        $('html, body').animate({
            scrollTop: $("#g-4").offset().top - menuHeight
        }, 1000);
        $('.myList a').removeClass('active');
        $('.myList #menu4').addClass('active');
    });

});