7

我正在尝试通过 twitter bootstrap 使用 affix 插件,但我不知道如何将其限制在父容器中,我创建了以下示例来显示我的问题:

问题演示: http: //www.codeply.com/go/DvcRXkeFZa

<div class="container">
    <div class="row">
        <div class="col-md-3 column">
            <ul id="sidebar" class="well nav nav-stacked" data-spy="affix" data-offset-top="130">
                <li><a href="#software"><b>Software</b></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#benefits">Benefits</a></li>
                <li><a href="#costs">Costs</a></li>
            </ul>
        </div>
        <div class="col-md-9 column">
            <h1>Blah, blah, blah</h1>
            <hr>
            <a class="anchor3" id="top" name="software"></a>
            <p>
             content here that scrolls...
            </p>
        </div>
    </div>
</div>

正如您所看到的,当您滚动它时它会溢出侧边栏,当它到达底部时它也不会贴在页面底部。

4

2 回答 2

24

从引导文档(http://getbootstrap.com/2.3.2/javascript.html#affix)..

小心!您必须管理固定元素的位置及其直接父元素的行为。位置由 affix、affix-top 和 affix-bottom 控制。当词缀从页面的正常流程中删除内容时,请记住检查可能折叠的父级。

因此,当元素固定时,您需要一些 CSSaffix来设置元素的宽度。如:

#sidebar.affix {
    position: fixed;
    top: 0;
    width:225px;
  }

Bootply 演示:http: //bootply.com/73864

关于 Bootstrap 词缀的相关答案:
如何使用 bootstrap 3 创建粘性左侧边栏菜单?
Twitter-bootstrap 3在调整窗口大小和页脚时附加侧边栏重叠内容

于 2013-08-16T10:26:00.417 回答
3

在对@FreezeDriedPop 的回答中,我发现这对我有用:

var navbw = $('#sidebar').width()-7;
$('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>');
于 2014-11-27T15:52:34.780 回答