title: Twitter bootstrap scrollspy not working with nav-pills and smooth scrolling
body: <p>I am using Bootstrap's nav pills as my top navbar, and I have used a piece of code to scroll to a certain point on the page when a pill is clicked. I am now trying to get scrollspy to work so the class of the pill will change from "active" to "disabled" (I have special css setup for the "disabled" class, but I'm having no luck. Any thoughts?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>     &lt;!-- Bootstrap --&gt;
      &lt;link href="bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="pantastic.css" rel="stylesheet"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Questrial|Lobster|Open+Sans:300,400|Josefin+Sans:300,400' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.slideto.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function(){ 
  
          $(window).scroll(function(){
              if ($(this).scrollTop() &gt; 100) {
                  $('.scrollup').fadeIn();
              } else {
                  $('.scrollup').fadeOut();
              }
          }); 
  
          $('.scrollup').click(function(){
              $("html, body").animate({ scrollTop: 0 }, 600);
              return false;
          });
  
          $('.toplogo').click(function(){
              $("html, body").animate({ scrollTop: 0 }, 600);
              return false;
          });
  
          $('.firstscroll').click(function(){
              $("html, body").animate({ scrollTop: 0 }, 600);
              return false;
          });
  
          $('.secondscroll').click(function(){
              $("html, body").animate({ scrollTop: 500 }, 600);
              return false;
          });
  
          $('.thirdscroll').click(function(){
              $("html, body").animate({ scrollTop: 1450 }, 600);
              return false;
          });
  
          $('.fourthscroll').click(function(){
              $("html, body").animate({ scrollTop: 2740 }, 600);
              return false;
          });
  
      });
  
  
  
  
      &lt;/script&gt;  
    &lt;/head&gt;
  
    &lt;body data-spy="scroll" data-target=".nav nav-pills"&gt;
  
       &lt;div class="navbox"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="span5"&gt;
          &lt;a href="#"&gt;&lt;img class="toplogo" src="navlogo.png" alt="logo"/&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="span10 offset5"&gt;
          &lt;div class="navbuttons"&gt;
          &lt;ul class="nav nav-pills custom"&gt;
          &lt;li class="active firstscroll"&gt;
              &lt;a href="#1"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
           &lt;li class="disabled secondscroll"&gt;&lt;a href="#secondunit"&gt;What is Pantastic?&lt;/a&gt;&lt;/li&gt;
           &lt;li class="disabled thirdscroll"&gt;&lt;a href="#3"&gt;About Us&lt;/a&gt;&lt;/li&gt;
           &lt;li class="disabled fourthscroll"&gt;&lt;a href="#4"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
           &lt;li class="disabled"&gt;&lt;a href="#modal" data-toggle="modal"&gt;&lt;img src="Price_Button.png" alt="Order Now" onmouseover="this.src='Price_Buttonhover.png'" onmouseout="this.src='Price_Button.png'"/&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
     &lt;div class="herounit"&gt;
      &lt;div class="container"&gt;
  
            &lt;h1&gt; Introducing Pantastic! &lt;/h1&gt;
  
  
        &lt;div class="row"&gt;
          &lt;h4&gt; Pantastic is the easiest way to bring your iPhone panoramas to life! Simply send us your panorama, and we will print, matte, and ship it right to your doorstep. &lt;/h4&gt;
        &lt;/div&gt;
          &lt;div id="secondunit"&gt;
        &lt;div class="row"&gt;
            &lt;img src="pricetag2.png" alt="pricetag"&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>