JSFiddle - React, Tailwind, and code Playground

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="scrollspy 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" });
});