我正在尝试使用 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
,以便当用户向下滚动菜单时保持相同的形状?
最佳答案
首先,您应该使用数据属性或 JS。
我更新了你的 jsFiddle . id="leftCol"的位置发生了变化:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
并添加了样式:
#leftCol {
width: 220px;
}
此外,您应该添加媒体查询以从移动 View 中删除词缀。
关于javascript - 如何使用带词缀的 css bootstrap list-group 在列中创建粘性菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41372179/