我正在尝试使用 twitter bootstrap 的 Affix 插件,但我不知道如何将其限制在父容器中,我创建了以下示例来显示我的问题:
问题演示:http://www.codeply.com/go/DvcRXkeFZa 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>
正如您所看到的,当您滚动时它会溢出侧边栏,但当它到达底部时它也不会固定到页面底部。
来自 Bootstrap 文档 (http://getbootstrap.com/2.3.2/javascript.html#affix http://getbootstrap.com/2.3.2/javascript.html#affix)..
小心!您必须管理固定元素的位置和
其直接父级的行为。位置由词缀控制,
顶部附加和底部附加。请记住检查潜在的
当词缀启动时,它会从其中删除内容,从而折叠父级
页面的正常流程。
所以你需要一些CSSaffix
当元素固定时设置元素的宽度。例如:
#sidebar.affix {
position: fixed;
top: 0;
width:225px;
}
Bootply 上的演示:http://bootply.com/73864 http://bootply.com/73864
Bootstrap Affix 的相关回答:
如何使用 Bootstrap 3 创建粘性左侧边栏菜单? https://stackoverflow.com/questions/19681895/how-to-create-a-sticky-left-sidebar-menu-using-bootstrap-3/21497753#21497753
Twitter-bootstrap 3 在调整窗口大小以及页脚时固定侧边栏重叠内容 https://stackoverflow.com/questions/21028843/twitter-bootstrap-3-affixed-sidebar-overlapping-content-when-window-resized-and/21029328#21029328
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)