如何使用Bootstrap和scrollToFixed jQuery插件獲取製表符窗格內容？

Question

我們使用jQuery Mobile，Bootstrap 3，scrollToFixed。我們已經創建了一個幾乎可以滿足我們需求的工作頁面，但是，我們無法讓標籤內容向上滾動。

我們提供了這裏的HTML：

<div class="container"> 
<img src="" width="100%" height="50" alt="logo" style="height:50px;display:block;" /> 
<nav id="menuone" class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" class="navbar-toggle" data-target="#or_mainnav"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="or_mainnav"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">item one</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">drop two <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">subitem one</a></li> 
       <li><a href="#">subitem two</a></li> 
      </ul> 
      </li> 
      <li><a href="#">item three</a></li> 
      <li><a href="#">item four</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

<img src="" width="100%" height="200" alt="product picture" style="height:200px;display:block;" /> 

<div class="headertwo"> 
    <h2> 
     Product Title 
    </h2> 
</div> 

<div id="menutwo"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#product_main" data-toggle="tab">item one</a></li> 
     <li><a href="#product_two" data-toggle="tab">item two</a></li> 
     <li><a href="#product_threes" data-toggle="tab">item three</a></li> 
     <li><a href="#product_four" data-toggle="tab">item four</a></li> 
    </ul> 
</div> 

<div id="tabcontent" class="content tab-content"> 
    <div class="tab-pane active" id="product_main"> 
     <div> 
      Main 
     </div> 
    </div> 
    <div class="tab-pane" id="product_two"> 
     Two 
    </div> 
    <div class="tab-pane" id="product_threes"> 
     Three 
    </div> 
    <div class="tab-pane" id="product_four"> 
     Four 
    </div> 
</div> 
    </div> 
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
<script src="http://raw.githack.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed-min.js"></script> 

我們的JavaScript是這樣的：

<script> 

$(document).ready(function() { 
    var menuOneHeight = $('#menuone').outerHeight(); 
    var menuTwoHeight = $('#menutwo').outerHeight(); 
    var headerOneHeight = $('.headertwo').outerHeight(); 
    $('#menuone').scrollToFixed(); 
    $('.headertwo').scrollToFixed({ 
    marginTop: menuOneHeight 
    }); 
    $('#menutwo').scrollToFixed({ 
    marginTop: menuOneHeight+headerOneHeight 
    }); 
    $('#tabcontent').scrollToFixed({ 
    marginTop: menuOneHeight+headerOneHeight+menuTwoHeight 
    }); 
    $('#product_main').load('/jemef/2'); 
}); 

</script> 

我們已經創建了一個的jsfiddle這裏：http://jsfiddle.net/outofcontrol/LSEZp/

隨着第一個標籤「標籤一個「處於活動狀態，向下滾動，您可以看到選項卡內容隱藏在頁面底部下方。我們希望標籤窗格中的內容向上滾動。有誰知道我們可以做到這一點？

Answer 1

爲了使這項工作，我刪除了#tabcontent JS中的scrollToFixed（）項。這個頁面的工作樣本可以的jsfiddle發現：

$(document).ready(function() { 
var menuOneHeight = $('#menuone').outerHeight(); 
var menuTwoHeight = $('#menutwo').outerHeight(); 
var headerOneHeight = $('.headertwo').outerHeight(); 

    $('#menuone').scrollToFixed(); 
    $('.headertwo').scrollToFixed({ 
    marginTop: menuOneHeight 
    }); 
    $('#menutwo').scrollToFixed({ 
    marginTop: menuOneHeight+headerOneHeight 
    }); 

}); 

http://jsfiddle.net/outofcontrol/LSEZp/1/