向下滾動時，停止覆蓋標簽菜單的內容

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;
}