jquery - 如何使用 Bootstrap 和 scrollToFixed jQuery 插件让选项卡 Pane 内容滚动？

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/

第一个选项卡“tab one”处于事件状态，向下滚动，您可以看到选项卡 Pane 内容隐藏在页面底部下方。我们希望选项卡 Pane 中的内容向上滚动。有谁知道我们如何实现这一点？

Answer 1

为了完成这项工作，我在 JS 中删除了 #tabcontent 的 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/