Boostrap affix under the fold

В настоящее время у меня возникла странная проблема, которую я не мог решить за последние 2 часа, поэтому я надеюсь, что кто-то здесь сможет мне помочь.Boostrap affix under the fold

Я пытаюсь получить боковую панель навигации липкой (с бутстрапом аффикса). Если я делаю это над сгибом -> он работает плавно. Если я попытаюсь сделать это под видимой областью браузера, он просто не работает.

Вот скрипку я пытаюсь решить: http://jsfiddle.net/qKFqg/63/

$('#winner').affix({ 
     offset: { 
     top: function() { 
      return (this.top = $('.comparison-table').outerHeight(true)) 
     } 
     } 
    });

<table class="comparison-table"> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
</table> 


<div class="row"> 
    <div class="col-xs-9" data-spy="scroll" data-target="#winner"> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 

    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 

    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    </div> 
    <div class="col-xs-3"> 
    <div id="winner" class="affix" title="Testsieger"> 
     asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa 
asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa  </div> 
    </div> 
</div>

Это один, который работает: http://jsfiddle.net/qKFqg/64/

<table class="comparison-table"> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 
    <tr> 
    <th class="rowTitle">Modell</th> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    <td>ASDF</td> 
    </tr> 

</table> 


<div class="row"> 
    <div class="col-xs-9" data-spy="scroll" data-target="#winner"> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 

    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 

    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    <p>asasa</p> 
    </div> 
    <div class="col-xs-3"> 
    <div id="winner" class="affix" title="Testsieger"> 
     asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa 
asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa  </div> 
    </div> 
</div>

Кто-нибудь знает решение ?

источник

2016-03-05 Chris We

Способ, которым работает плагин аффикса, заключается в том, что при прокрутке он вычисляется, когда вы нажимаете свое смещение. В этот момент он добавляет класс «affix» к вашему элементу. В вашем CSS вы бы определили, что это означает. Обычно что-то вроде этого:

.affix { 
    top: 0; 
}

Это сделает это так, что, когда ваш элемент собирается уходить в верхней части экрана, она застрянет в 0. Если вы установите элемент в положение: исправлено без указания фактическое положение для него, оно будет просто придерживаться своего естественного положения.

Здесь ваша скрипка с этим добавил: http://jsfiddle.net/jbbugvrz/

источник

2016-03-05 20:52:59 mcgraphix

Удивительно! Спасибо огромное! –

Boostrap affix under the fold

ответ

Смежные вопросы