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>
<body>
    <div class="scrollspy navbar">
        <nav class="nav">
            <li class="spy1"><a href="#">hide</a></li>
            <li><a href="#option1">Option 1</a></li>
            <li><a href="#option2">Optionc 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="content1">
        <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 class="scrollspy2 navbar">
        <nav class="nav">
             <li class="spy2"><a href="#">hide</a></li>
            <li><a href="#option6">Option 6</a></li>
            <li><a href="#option7">Option 7</a></li>
            <li><a href="#option8">Option 8</a></li>
            <li><a href="#option9">Option 9</a></li>
            <li><a href="#option10">Option 10</a></li>
        </nav>
    </div>
     <div class="content2">
        <section id="option6">6</section>
        <section id="option7">7</section>
        <section id="option8">8</section>
        <section id="option9">9</section>
        <section id="option10">10</section>
    </div>
</body>

CSS

.hidey {
    display:none;
}

.nav li {
    float: left
}

.navbar {
    position: fixed;
}

.navbar2 {
    top: 80px;
}

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

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

JavaScript

$(document).ready(function () {
    $("body").scrollspy({ target: ".scrollspy" });
});

$( ".spy1" ).click(function() {
   $(".scrollspy, .content1").hide();
   $(".scrollspy2, .content2").show();
   $("body").scrollspy({ target: ".scrollspy2" });
   $("html, body").animate({
            scrollTop: 0
        }, 600);
});

$( ".spy2" ).click(function() {
   $(".scrollspy2, .content2").hide();
   $(".scrollspy, .content1").show();
     $("body").scrollspy({ target: ".scrollspy" });
   $("html, body").animate({
            scrollTop: 0
        }, 600);
});