我目前面临的一个奇怪的问题是我在过去2小时内无法解决,这就是为什么我希望有人能够帮助我。
我正在尝试获取侧边栏导航粘性(带引导词缀)。如果我在折叠之上这样做 - >它工作顺利。如果我尝试在浏览器可见区域下方执行此操作,则操作简单无法正常工作。
这是我试图解决的小提琴: 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>
有谁知道解决方案?
答案 0 :(得分:1)
词缀插件的工作方式是滚动时,它会在你达到偏移量时计算出来。此时它会为您的元素添加一个类“词缀”。在CSS中,您将定义这意味着。通常是这样的:
.affix {
top: 0;
}
这将使得当你的元素即将离开屏幕的顶部时,它将被卡在0.如果你将元素设置为position:fixed而不指定它的实际位置,它将只是坚持自然的位置。
这里你的小提琴添加了:http://jsfiddle.net/jbbugvrz/