Question

我正在尝试使用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>

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

Answer 1

来自Bootstrap文档（http://getbootstrap.com/2.3.2/javascript.html#affix）..

抬起头来！您必须管理固定元素的位置和其直接父母的行为。位置由词缀控制，词缀顶部和词缀底部。记得要检查一下当词缀删除内容时，折叠的父级会被删除页面的正常流程。

因此，affix需要一些CSS来设置元素固定时的宽度。如：

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

Bootply上的演示：http://bootply.com/73864

关于Bootstrap词缀的相关答案：
How to create a sticky left sidebar menu using bootstrap 3?
Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer

Answer 2

在@FreezeDriedPop的回答中，我发现这对我有用：

var navbw = $('#sidebar').width()-7;
$('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>');

使用Twitter Bootstrap Affix溢出侧边栏

2 个答案: