JSFiddle - React, Tailwind, and code Playground

by adamp

HTML

<script src="http://rawgithub.com/twbs/bootstrap/b4c4072679943773a7582daa63f545ba818fa627/js/bootstrap-scrollspy.js"></script>
<nav id="navbar">
  <ul class="nav">
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>
    <li><a href="#page5">Page 5</a></li>
  </ul>
</nav>

<div id="content" data-spy="scroll" >
  <section id="page1" class="page">
    <h1>Page 1</h1>
  </section>

  <section id="page2" class="page">
    <h1>Page 2</h1>
  </section>

  <section id="page3" class="page">
    <h1>Page 3</h1>
  </section>

  <section id="page4" class="page">
    <h1>Page 4</h1>
  </section>

  <section id="page5" class="page">
    <h1>Page 5</h1>
  </section>
</div>

CSS

body {
    padding-top: 40px;
    font: normal 13px 'Helvetica Neue', Helvetica, sans-serif;
}

#navbar {
    border-bottom: 1px solid red;
    background: #ddd;
    width: 100%;
    top: 0;
    position: fixed;
}

#navbar li {
    padding: 10px;
    float: left;
}

#navbar a {
    text-decoration: none;
    color: #000;
}

#navbar .active a {
    color: red;
}
$('body').scrollspy();


.page {
    border: 1px solid #ddd;
    border-width: 1px 0;
    background: #f7f7f7;
    margin: 20px 0;
    padding: 200px;
    height: 100px;
}

JavaScript

// Alternatively, spy on the body element itself.
// Make sure to remove the `#content` CSS rule to try this.
$('body').scrollspy();
// (In this case, one or both of the `data-spy` and `data-target` attributes may be unnecessary.)