粘性侧栏内的bootstrap tabbar。 。如图所示

Question

侧边栏图片中的Bootstrap标签栏

我想在左边有一个粘性侧边栏，右边有数据。

点击侧边栏 - 选项卡右侧的数据应该更改。

上/下左侧边栏上的

应粘在屏幕中间，直到身体右侧的高度结束。

另外，我还需要在身体右侧再添一个标签栏。

这里我使用了js-code但是在向上滚动的内部引导标签栏上也向下滚动了外部左滚动条。

这是我用过的代码

//-----html 
<div class="tabbar"> <--used as outer sidebar--->
ul class="nav nav-tabs" id="sidebar">
      <li class="active"><a href="#a" data-toggle="tab">About Us</a></li>
      <li class=""><a href="#b" data-toggle="tab">Our Philosophy</a></li>
        .....
    </ul>

    <div class="tab-content right-bar">
         <div class="tab-pane active" id="a">

         <--inner tabbar-->

         <h2>Inner tab</h2>
          <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
          </ul>

          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
              <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
          </div>

         </div>
         <div class="tab-pane" id="b">
         ....
         </div>

</div>

Tab-left继续滚动到右侧平底锅

// $(function() {

//     var $sidebar   = $("#sidebar"),
//         $window    = $(window),
//         $footer    = $("#footer"), // use your footer ID here
//         offset     = $sidebar.offset(),
//         foffset    = $footer.offset(),
//         threshold  = foffset.top - $sidebar.height(); // may need to tweak
//         topPadding = 15;

//     $window.scroll(function() {
//         if ($window.scrollTop() > threshold) {
//             $sidebar.stop().animate({
//                 marginTop: threshold
//             });
//         } else if ($window.scrollTop() > offset.top) {
//             $sidebar.stop().animate({
//                 marginTop: $window.scrollTop() - offset.top + topPadding
//             });
//         } else {
//             $sidebar.stop().animate({
//                 marginTop: 0
//             });
//         }
//     });

// });

当我向上滚动内部标签栏的内部主体（标签内容）时也向下滚动，请看这里是图像

向上滚动时出现问题