JSFiddle - React, Tailwind, and code Playground

by jofrysutanto

HTML

<link rel="stylesheet" href="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/css/bootstrap.3.0.min.css">
<script src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/js/bootstrap.3.0.min.js"></script>
<div class="wrapper">
    <div class="scrollspy navbar">
        <nav class="nav">
            <li><a href="#option1">Option 1</a></li>
            <li><a href="#option2">Option 2</a></li>
            <li><a href="#option3">Option 3</a></li>
            <li><a href="#option4">Option 4</a></li>
            <li><a href="#option5">Option 5</a></li>
        </nav>
    </div>
    
    <div class="scrollspy2 navbar navbar2">
        <nav class="nav">
            <li><a href="#option1">Option 1</a></li>
            <li><a href="#option2">Option 2</a></li>
            <li><a href="#option3">Option 3</a></li>
            <li><a href="#option4">Option 4</a></li>
            <li><a href="#option5">Option 5</a></li>
        </nav>
    </div>
    
    <div class="content">
        <section id="option1">1</section>
        <section id="option2">2</section>
        <section id="option3">3</section>
        <section id="option4">4</section>
        <section id="option5">5</section>
    </div>
</div>

CSS

.wrapper {
    height: 600px;
    overflow: auto;
}

.nav li {
    float: left
}

.navbar {
    position: fixed;
}

.navbar2 {
    top: 80px;
}

.nav li.active a {
    background: #0000ff;
}

.content section {
    width: 100%;
    height: 600px;
    background: #00f0f0;
}

JavaScript

$(document).ready(function () {
    $(".wrapper").scrollspy({ target: ".scrollspy" });
    
    var scollSpy2ActiveLI = "";
    
    $('.wrapper').on('activate.bs.scrollspy', function () {
        if (scollSpy2ActiveLI != "") {
            scollSpy2ActiveLI.removeClass('active');            
        }        
        var activeTab = $('.scrollspy li.active a').attr('href');
        scollSpy2ActiveLI = $('.scrollspy2 li a[href="' + activeTab + '"]').parent();
        scollSpy2ActiveLI.addClass('active');
    })
    
    $('.wrapper').trigger('activate.bs.scrollspy');
});