向下滚动时阻止内容覆盖选项卡菜单

Question

我正在使用带有下拉菜单的 Bootstrap 药丸标签制作菜单页面。我把标签放在左边，内容放在右边。内容将到达页面的下方，因此选项卡需要能够粘在页面顶部。但是，既然他们这样做了，当我向下滚动时，内容就会溢出到选项卡上。我的代码见下文：

HTML：

<div class="container large-padding-top">
    <div class="col-xs-2" id="menuSidebar" style="padding-top: 70px;">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a data-toggle="tab" href="#cakes">Cakes</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Drinks
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="tab" href="#Tea">Tea</a></li>
                    <li><a data-toggle="tab" href="#Coffee">Coffee</a></li>
                    <li><a data-toggle="tab" href="#ColdDr">Cold Drinks</a></li>
                </ul>
            </li>
            <li><a data-toggle="tab" href="#Breakfast">Breakfast</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Lunches
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="tab" href="#LightLunch">Light Lunch</a></li>
                    <li><a data-toggle="tab" href="#ChildLunch">Children Lunches</a></li>
                    <li><a data-toggle="tab" href="#OtherLunch">Lunches</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-xs-10">
        <div class="tab-content" style="width: 100%">
            <div id="cakes" class="tab-pane fade in active">
                <h3>Our Cakes</h3>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Mud cake</td>
                            <td>£2.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="Tea" class="tab-pane fade">
                <h3>Tea here</h3>
            </div>
            <div id="Coffee" class="tab-pane fade">
                <h3>Coffee here</h3>
            </div>
            <div id="ColdDr" class="tab-pane fade">
                <h3>Cold Drinks here</h3>
            </div>
            <div id="Breakfast" class="tab-pane fade">
                <h3>Breakfast here</h3>

            </div>
                <div id="LightLunch" class="tab-pane fade">
                    <h3>Light Lunch here</h3>
                </div>
                <div id="ChildLunch" class="tab-pane fade">
                    <h3>Kids lunch here</h3>
                </div>
                <div id="OtherLunch" class="tab-pane fade">
                    <h3>Other Lunch here</h3>
                </div>
            </div>
        </div>
    </div>

CSS：

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

#menuSidebar.sticky {
  position: fixed;
  top: 0;
}

JavaScript：

var $window = $(window),
        $stickyEl = $('#menuSidebar'),
        elTop = $stickyEl.offset().top;

    $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

这里是我的问题的一些截图：

这是正常的

这是坏掉的

为徽标被擦掉表示歉意，但我不应该在这里发布它:-)

Answer 1

不太清楚你的js的目的是什么。将ul.nav-pills 设置为position: fixed; 并摆脱你的js：

JSFiddle

CSS：

.nav-pills {
  position: fixed;
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}