我试图在左列中制作一个固定菜单，但词缀插件在我的情况下工作起来很奇怪：http://jsfiddle.net/AlexeyKosov/753ofx5x/试着向下和向后滚动，当你向后滚动时，菜单会跳到顶部。我做错了什么？
HTML:
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default menu">
<div class="list-group">
<a class="list-group-item" href="#">Item 1</a>
<a class="list-group-item" href="#">Item 2</a>
<a class="list-group-item" href="#">Item 3</a>
<a class="list-group-item" href="#">Item 4</a>
</div>
</div>
</div>
<div class="col-xs-9">
<div class="content">
</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
CSS：
body {
padding-top: 20px;
}
.content {
height: 1000px;
}
.footer {
background: #eee;
height: 1000px;
}
.menu {
width: 250px;
}
JS:
$(function() {
$('.menu').affix({
offset: {
top: 100,
bottom: 1000
}
});
});
只需使用affix:
避免编写脚本
在引导程序本身中，有一个名为affix的内置类，它由以下css组成：
.affix {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0px, 0px, 0px);
}
演示
HTML:
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default menu affix">
<div class="list-group">
<a class="list-group-item" href="#">Item 1</a>
<a class="list-group-item" href="#">Item 2</a>
<a class="list-group-item" href="#">Item 3</a>
<a class="list-group-item" href="#">Item 4</a>
</div>
</div>
</div>
<div class="col-xs-9">
<div class="content">
</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
我只需要添加
.affix-bottom {
position: absolute;
}