Bootstrap Scroll Spy not working.Shows only the home state active but doesnt change to other states when scrolled down

This is my html and css.please help me with the scrollspy as I dont know what exactly is the problem .If possible let me know the code you have written to solve the problem

MY HTML:

<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">

  <button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">&#9776;</button>

<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">

  <a class="navbar-brand" href="#"></a>

    <div class="navbar-inner">

      <ul class="nav navbar-nav">

        <li class="nav-item active">
            <a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item">
            <a class="nav-link" data-target="#about">ABOUT</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" data-target="#skills">SKILLS</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#contact">CONTACT</a>
        </li>

      </ul>

    </div>

</div>

</nav>

<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>

MY CSS

and the divs are of 750px in heights

  body
  {

    background: none;
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'Droid Serif', Georgia, Times, serif;

  }
  /* --------------------------------------------Navbar CSS--------------------------------------------------- */

  .navbar-default 
  {
    background-color: #610B0B ;
    border-radius:0px;

  }
  .navbar-default .navbar-nav > li > a 
  {
    color: white;
    font-size: 15px;

    font-family: 'Droid Serif', Georgia, Times, serif;
    letter-spacing: 1px;
    margin: 3px 10px -3px 10px;
    border: 2px solid transparent;
    padding: 8px;

  }

  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus
  { 
    border: 2px solid white;
    border-radius: 5px;
    color: white;
    padding: 8px;
  }

  .navbar-default .navbar-nav > .active > a, 
  .navbar-default .navbar-nav > .active > a:hover, 
  .navbar-default .navbar-nav > .active > a:focus 
  {
    border: 2px solid white;
    border-radius: 5px;
    color: #555;
    background-color: #E7E7E7;
  }

Solution

There are a couple of things wrong.

First, 3 of your nav-link anchors have data-target= when they should have href=

Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:

<body data-target="#navbar">

and third, if you haven't, you need to call Scrollspy via Javascript:

$('body').scrollspy({ target: '#navbar' })

Here is a Codepen with a working example:

http://codepen.io/charliebeckstrand/pen/NrWpXP