折叠下方的Boostrap粘贴(Boostrap affix underneath 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"> asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa </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"> asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa </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>

有谁知道解决方案？

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.

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.

Here is the fiddle I try to solve: 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"> asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa </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>

This is the one which is working: 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"> asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa asasa </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>

Does anyone know the solution?

最满意答案

affix插件的工作方式是当你滚动时，它会计算出你的偏移量。此时它会为您的元素添加一个类“词缀”。在CSS中，您将定义这意味着。通常是这样的：

.affix { top: 0; }

这将使得当你的元素即将离开屏幕的顶部时，它将被卡在0.如果你将元素设置为position：fixed而不指定它的实际位置，它将只是坚持它的自然的位置。

在这里你的小提琴添加： http ： //jsfiddle.net/jbbugvrz/

The way the affix plugin works is that as you scroll, it figures out when you've hit your offset. At that point it adds a class "affix" to your element. In your CSS you would define that that means. Normally something like this:

.affix { top: 0; }

That will make it so that when your element is about to go off the top of the screen, it will get stuck at 0. If you set an element to position:fixed without specifying an actual position for it, it will just stick in its natural location.

Here your fiddle with that added: http://jsfiddle.net/jbbugvrz/

更多推荐