title: Twitter Bootstrap Scroll Spy
body: <p>I'm having an issue with twitter bootstrap scroll spy when the user starts scrolling. The navigation does not change to indicate which sections it's on until it reaches mid way through the div. Secondly it skips pass item 4 and goes straight to the last item. Here is an example of it : <a href="http://jsfiddle.net/eoboite/kjvAa/38/" rel="nofollow">http://jsfiddle.net/eoboite/kjvAa/38/</a></p>
  
  <p>What am I do wrong? Help please </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body data-spy="scroll"&gt;
      &lt;div class="header"&gt;
          &lt;div class="center-container"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="nav-container"&gt;
          &lt;div class="center-container"&gt;
              &lt;ul class="nav main-nav" id="nav-bar"&gt;
                  &lt;li class="active"&gt;&lt;a href="#item1"&gt;Item 1&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#item2"&gt;Item 2&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#item3"&gt;Item 3&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#item4"&gt;Item 4&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#item5"&gt;Item 5&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="sectional add-room" id="item1"&gt;
              &lt;div class="inner-wrapper"&gt;
                  &lt;div class="center-container"&gt;
                       &lt;h1&gt;Item 1&lt;/h1&gt;
  
                      &lt;p&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end item1--&gt;
          &lt;hr /&gt;
          &lt;div class="sectional add-room" id="item2"&gt;
              &lt;div class="inner-wrapper"&gt;
                  &lt;div class="center-container"&gt;
                       &lt;h1&gt;Item 2&lt;/h1&gt;
  
                      &lt;p&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end item2--&gt;
          &lt;hr /&gt;
          &lt;div class="sectional add-room" id="item3"&gt;
              &lt;div class="inner-wrapper"&gt;
                  &lt;div class="center-container"&gt;
                       &lt;h1&gt;Item 3&lt;/h1&gt;
  
                      &lt;p&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end item3--&gt;
          &lt;hr /&gt;
          &lt;div class="sectional add-room" id="item4"&gt;
              &lt;div class="inner-wrapper"&gt;
                  &lt;div class="center-container"&gt;
                       &lt;h1&gt;Item 4&lt;/h1&gt;
  
                      &lt;p&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end item14--&gt;
          &lt;hr /&gt;
          &lt;div class="sectional add-room" id="item5"&gt;
              &lt;div class="inner-wrapper"&gt;
                  &lt;div class="center-container"&gt;
                       &lt;h1&gt;Item 5&lt;/h1&gt;
  
                      &lt;p&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end item5--&gt;
          &lt;!--Include js--&gt;
          &lt;script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              console.log('starting scroll spy');
              $('.nav-container').affix({
                  off: {
                      top: 100
                  },
              });
              console.log('done');
          &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
   .center-container {
      margin:0 auto;
      width: 960px;
      border:1px solid red;
      overflow:hidden;
  }
  .header {
      background:red;
      padding: 30px 50px;
      overflow:hidden;
  }
  .nav-container {
      background: #0e1317;
      overflow:hidden;
      left:0;
      margin-bottom:0;
      right:0;
      z-index:1030;
  }
  .active {
      background:#075f81;
  }
  .nav-container.affix {
      top: 0;
      position:fixed;
  }
  ul.main-nav {
      width: 960px;
  }
  ul.main-nav li {
      float: left;
  }
  .main-nav &gt; li &gt; a {
      color: #fff;
      display:block;
      padding: 25px 15px;
      text-decoration:none;
  }
  .main-nav &gt; li &gt; a:hover {
      text-decoration:underline;
  }
  .inner-wrapper {
      padding:50px 20px;
  }
  </code></pre>