<nav>
            <ul>
                <li><a href="#one">Section 1</a></li>
                <li><a href="#Two">Section 2</a></li>
                <li><a href="#Three">Section 3</a></li>
                <li><a href="#Four">Section 4</a></li>
                <li><a href="#Five">Section 5</a></li>
            </ul>
        </nav>
        <div class="container">
            <section class="sec" id="one">
                <h1>Section One</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
            </section>      
            <section class="sec" id="Two">
                <h1>Section Two</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
            </section>
            <section class="sec" id="Three">
                <h1>Section Three</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
            </section>
            <section class="sec" id="Four">
                <h1>Section Four</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
            </section>
            <section class="sec" id="Five">
                <h1>Section Five</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
            </section>
        </div>

*{
                margin: 0;padding: 0;box-sizing: border-box;font-family: sans-serif;
                scroll-behavior: smooth;
            }
            nav{
                display:flex;
                justify-content: center;
                align-items: center;background-color: #3781b1;height: 10vh;box-shadow: 0px 5px 15px 0px black;
                position: fixed;width: 100%;top: 0;
            }
            nav ul{display:flex;}
            nav ul li {list-style: none;padding: 0 30px;}
            nav ul li a{
                transition: .5s;
                text-decoration: none;
                color: #fff;
            }
            .active{
                background-color: blue;padding: 10px;border-radius: 5px;font-weight: 600;
            }
            .sec{
                height: 100vh;padding: 10%;color: #fff;display: flex;
            }
            .sec h1{padding: 40px;font-size: xxx-large;height: max-content;}
            .sec p {font-size: larger;}
            .sec:nth-child(odd){flex-direction: row-reverse;}
            .sec:nth-child(odd) h1{border-left: 5px solid;margin-left: 30px;}
            .sec:nth-child(even) h1{border-right: 5px solid;margin-right: 30px;}
            .sec:nth-child(1){background-color: rgb(221, 86, 86);}
            .sec:nth-child(2){background-color: darkslategrey;}
            .sec:nth-child(3){background-color: #12a012;}
            .sec:nth-child(4){background-color: rgb(238, 98, 122);}
            .sec:nth-child(5){background-color: teal;}

            $(window).on('scroll load', function() {
            var currentTop = $(window).scrollTop();
            var elems = $('.sec');
            elems.each(function(index){
                var elemTop 	= $(this).offset().top - 20;
                var elemBottom 	= elemTop + $(this).height();
                if(currentTop >= elemTop && currentTop <= elemBottom){
                    var id 		= $(this).attr('id');
                    var navElem = $('a[href="#' + id+ '"]');
                    navElem.addClass('active');
                    navElem.parent().siblings().children().removeClass( 'active' );
                }
            })
        });