Boostrap在折叠下方贴上

时间:2016-03-05 19:31:35

标签: javascript jquery twitter-bootstrap

我目前面临的一个奇怪的问题是我在过去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>

有谁知道解决方案?

1 个答案:

答案 0 :(得分:1)

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

.affix {
   top: 0;
}

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

这里你的小提琴添加了:http://jsfiddle.net/jbbugvrz/