title: Bootstrap 3 - Scrollspy with sidebar
body: <p>I am using Bootstrap 3. I want to recreate the same functionality as the sidebar in the <a href="http://getbootstrap.com/javascript/" rel="noreferrer">documentation on the Bootstrap site</a>.</p>
  
  <p>Below is my code, and it is also here: <a href="http://bootply.com/82119" rel="noreferrer">http://bootply.com/82119</a></p>
  
  <p>Two problems.</p>
  
  <ol>
  <li>The sidebar items do not highlight as you scroll down the page past each section.</li>
  <li>When you click on a sidebar item, it jumps to the relevant anchor, but half the content is not visible. Changing the <code>data-offset</code> value appears to have no effect.</li>
  </ol>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
              &lt;div class="list-group navbar" id="sidebar"&gt;
                  &lt;ul class="nav" id="mynav"&gt;
                      &lt;li&gt;&lt;a href="#c1" class="list-group-item"&gt;
                            Content 1
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#c2" class="list-group-item" contenteditable="false"&gt;Content 2
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#c3" class="list-group-item" contenteditable="false"&gt;Content 3
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#c4" class="list-group-item" contenteditable="false"&gt;Content 4
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#c5" class="list-group-item" contenteditable="false"&gt;Content 5
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0"&gt;
                  &lt;h2 id="c1" class=""&gt;Content 1&lt;/h2&gt;
  At Bootply we attempt to build simple Bootstrap templates that utilize...
              &lt;hr class="col-md-12"&gt;
                      &lt;h2 id="c2" class=""&gt;Content 2&lt;/h2&gt;
  Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                  &lt;hr class="col-md-12"&gt;
                      &lt;h2 id="c3" class=""&gt;Content 3&lt;/h2&gt;
  Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                  &lt;hr class="col-md-12"&gt;
                      &lt;h2 id="c4" class=""&gt;Content 4&lt;/h2&gt;
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
                      &lt;h2 id="c5" class=""&gt;Content 5&lt;/h2&gt;
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>