javascript - 如何使用带词缀的 css bootstrap list-group 在列中创建粘性菜单？

Question

我正在尝试使用 CSS Bootstrap 创建一个粘性菜单 affix和 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>

但是data属性并没有让菜单粘起来!它只是保持在顶部。

所以我尝试使用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;
}

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