Bootstrap Scrollspy

<nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#sectionOne">Section One</a></li>
          <li><a href="#sectionTwo">Section Two</a></li>
          <li><a href="#sectionThree">Section Three</a></li>
          <li><a href="#sectionFour">Section Four</a></li>
         
        </ul>      
   
</nav>    

<div data-spy="scroll" data-target="myNavbar" data-offset="12">
  <div id="sectionOne">
    <div class="container">
      <h1>Section One</h1>
      <p> Demo Section</p>
    </div>
  </div>
  <div id="sectionTwo">
    <div class="container">
      <h1>Section Two</h1>
      <p> Demo Section</p>
    </div> 
  </div>
  <div id="sectionThree">
    <div class="container">
      <h1>Section Three</h1>
      <p> Demo Section</p>
    </div>
  </div>
  
  <div id="sectionFour">
    <div class="container">
      <h1>Section Four</h1>
      <p> Demo Section</p>
    </div>
  </div>
</div>