如何使用帶有詞綴的css bootstrap list-group在列中創建粘性菜單？

Question

我正在嘗試使用CSS Bootstrap 附加和list-group菜單創建一個粘性菜單。

除了用戶向下滾動時，我設法讓大部分工作都能正常工作。

當用戶向下滾動時，菜單似乎占據了整個頁面。

我試圖通過數據屬性進行設置

用這樣的東西

<div class="container">
    <div class="row">
        <div class="col-md-3" id="leftCol">

            <div data-spy="affix">

                <div class="list-group list-group-root well">
                    <a class="list-group-item" href="#introduction">Introduction</a>
                    <a class="list-group-item" href="#features">Features</a>
                    <a class="list-group-item" href="#dependencies">Dependencies</a>
                </div>

            </div>

        </div>
        <div class="col-md-9" id="mainCol">

            Some long text for the body along with some tables.

        </div>
    </div>
</div>

但數據屬性沒有使菜單堅持！ 它只是保持在頂部。

所以我試着用JS來完成這樣的工作

$(function(){

    $('#leftCol').affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = $('.footer').outerHeight(true))
        }
      }
    });


});

我創建了jsFiddle來向您展示當前的行為。

如何修復此affix以便當用戶向下滾動菜單時保持相同的形狀？

Answer 1

首先，您應該使用數據屬性或JS。

我更新了你的jsFiddle 。 id =“leftCol”的位置已更改：

<div class="col-md-3" >

        <div id="leftCol">

              ...

        </div>

    </div>

和風格添加：

#leftCol {
   width: 220px;
}

此外，您應添加媒體查詢以從移動視圖中刪除詞綴。

Answer 2

作為一種“不可接受的”解決方法，我將菜單的最大寬度設置為250px

.list-group.list-group-root {
    padding: 0;
    max-width: 250px;
}

我不確定如何在不添加max-with情況下使其工作，而max應該由父級定義。 在這種情況下class="col-md-3"

更新

javascript來救援！

我添加了以下JS代碼來解決這個問題。

它基本上每次affix.bs.affix事件時調整菜單大小

$(document).on('affix.bs.affix', '#docs-menu', function() {
    $(this).width($(this).width());
});

來自文檔

affix.bs.affix =>此事件在元素被粘貼之前立即觸發。

Answer 3

好的，我相信我的大部分代碼都像你想要的那樣工作。 我做的主要更改是添加此CSS：

#leftCol {
    display: block;
    height: auto;
    padding: 0;
    width: 100%;
}

.navbar-fixed-top-again {
    position: static;
    top: 60px;
    z-index:1031;
}
.navbar-inner {
    background: red;
    padding: 5px;
}

.affix {
    position: fixed !important;
}

我更改了HTML上的一些結構：

<div class="container body-content">
    <div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>

    <!-- new nav section -->
    <div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
        <div class="navbar-inner">
            <div class="list-group list-group-root well">
             *the rest of your code*
            </div>
        </div>
    </div>
</div>

現在的主要問題是具有可變高度的粘性導航菜單。 如果您注意到在滾動下方的閱讀內容時會跳起並隱藏。 似乎可以使用JavaScript修復此問題（鏈接到SO問題） 。

下面是你更新的小提琴的鏈接 。 希望有所幫助。