Bootstrap Scroll Spy not working.Shows only the home state active but doesnt change to other states when scrolled down
<p>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</p>

<p>MY HTML:
</p>

<pre><code>&lt;nav class="navbar navbar-default center navbar-fixed-top" id="navbar"&gt;

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

&lt;div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"&gt;

  &lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt;

    &lt;div class="navbar-inner"&gt;

      &lt;ul class="nav navbar-nav"&gt;

        &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" data-target="#jumbotron"&gt;HOME &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;

        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" data-target="#about"&gt;ABOUT&lt;/a&gt;
        &lt;/li&gt;

        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" data-target="#skills"&gt;SKILLS&lt;/a&gt;
        &lt;/li&gt;

        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#contact"&gt;CONTACT&lt;/a&gt;
        &lt;/li&gt;

      &lt;/ul&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;/nav&gt;

&lt;div class=" jumbotron" id="jumbotron"&gt;&lt;/div&gt;
&lt;div id="about"&gt;&lt;/div&gt;
&lt;div id="skills"&gt;&lt;/div&gt;
&lt;div id="contact"&gt;&lt;/div&gt;
</code></pre>

<p>MY CSS</p>

<p>and the divs are of 750px in heights  </p>

<pre><code>  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 &gt; li &gt; 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 &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus
  { 
    border: 2px solid white;
    border-radius: 5px;
    color: white;
    padding: 8px;
  }

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