title: Boostrap affix only when past scroll point
body: <p>I am trying to implement Bootstraps Affix function on my site, the sidebar I would like to only scroll after the adjacent div starts going out of view.</p>
  
  <p>I would like the <code>.submenu</code> to only be sticky once the first <code>.test-div</code> starts to scroll out of view, so it scrolls with <code>.test-div</code> initially to the top but once the first <code>.test-div</code> starts to go out of sight should it become sticky.</p>
  
  <p><a href="http://jsfiddle.net/epnfzo4s/" rel="nofollow">jsFiddle link</a></p>
  
  <p>CSS:</p>
  
  <pre><code>body {
      padding-top: 200px;
  }
  .test-div {
      min-height: 400px;
      border: 1px solid #D1D1D1;
      margin-bottom: 10px;
  }
  .footer {
      border: 1px solid red;
      height: 500px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-8"&gt;
  
              &lt;div id="1" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="2" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="3" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="4" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="5" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="6" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div id="7" class="test-div"&gt;
                  &lt;h2&gt;Header&lt;/h2&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="col-xs-4"&gt;
              &lt;div data-spy="affix" data-offset-top="60" data-offset-bottom="400" class="submenu"&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
                sub menu will go here&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>