TL; DR:这是一个小提琴,点击或滚动查看错误:http://jsfiddle.net/Tetaxa/6cC9w/
我有一个有两列的页面,右边是一个附加的div(一个工具栏),左边是一些内容.当内容高于工具栏时,这非常有用.但是,当工具栏更高时,我会得到一些奇怪的行为.在滚动并单击时,工具栏的附加状态切换,内容折叠.
这是相关的html:
<div class="row">
<div class="col-xs-8">
<p>Lorem ipsum dolor</p>
</div>
<div class="col-xs-4">
<div class="affixed-div">
Affixed
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的javascript.计算底部是为了防止工具栏覆盖底部内容.
var div = $('.affixed-div');
var row = div.closest('.row');
div.affix({
offset: {
bottom: $(document).height() - row.offset().top - row.height(),
top: div.offset().top
}
});
Run Code Online (Sandbox Code Playgroud)
这是自定义css:
.affix {
top: 0;
}
.affix-bottom {
position: relative;
}
Run Code Online (Sandbox Code Playgroud)
我在这里做错了吗?这是一个错误还是按预期工作?我是否必须手动检查行的高度,如果内容较高或者有更好的方法可以避免它,则只附加工具栏?我应该提交错误报告吗?