如何使用带有词缀的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;
}

此外，您应该添加媒体查询以从移动视图中删除词缀。