title: Boostrap affix underneath the fold
body: <p>I am currently facing a weird problem which I could not solve in the last 2 hours, that's why I hope someone here is able to help me. </p>
  
  <p>I am trying the get a sidebar navigation sticky (with bootstrap affix). If I do it above the fold -> it works smoothly. If I try to do it underneath the browser visible area it does simple not work. </p>
  
  <p>Here is the fiddle I try to solve: 
  <a href="http://jsfiddle.net/qKFqg/63/" rel="nofollow">http://jsfiddle.net/qKFqg/63/</a></p>
  
  <pre><code>  $('#winner').affix({
        offset: {
          top: function () {
            return (this.top = $('.comparison-table').outerHeight(true))
          }
        }
      });
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;table class="comparison-table"&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;div class="row"&gt;
    &lt;div class="col-xs-9" data-spy="scroll" data-target="#winner"&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
  
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
  
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-3"&gt;
      &lt;div id="winner" class="affix" title="Testsieger"&gt;
        asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa 
  asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the one which is working: 
  <a href="http://jsfiddle.net/qKFqg/64/" rel="nofollow">http://jsfiddle.net/qKFqg/64/</a></p>
  
  <pre><code>    &lt;table class="comparison-table"&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th class="rowTitle"&gt;Modell&lt;/th&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
      &lt;td&gt;ASDF&lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/table&gt;
  
  
  &lt;div class="row"&gt;
    &lt;div class="col-xs-9" data-spy="scroll" data-target="#winner"&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
  
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
  
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
      &lt;p&gt;asasa&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-3"&gt;
      &lt;div id="winner" class="affix" title="Testsieger"&gt;
        asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa 
  asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Does anyone know the solution?</p>