好的,我很难理解
Bootstrap Affix component.我的目标是让页面在页面的顶部滚动到页面顶部下方时,屏幕左下角会显示一个“返回顶部”链接(在页边距上).我的网页有一个NavBar固定在顶部和一个容器的身体.以下是我在哪里的一般想法,但是我也在
setup a JS Fiddle演示了我的设置.我也不是一个专业的定位,所以这也是我的问题的一部分.
<div class="navbar navbar-fixed-top">...</div>
<div class="content-container" id="top">
<p>Content that is longer than the viewport..</p>
<span id="top-link" data-spy="affix">
<a href="#top" class="well well-sm">Back to Top</a>
</span>
</div>
<style>
.navbar-fixed-top + .content-container {
margin-top: 70px;
}
.content-container {
margin: 0 125px;
}
#top-link.affix {
position: absolute;
bottom: 10px;
left: 10px;
}
</style>
解决方法
现在我更了解了Affix组件,我已经提出了解决方案.指定顶部偏移量并调整CSS后,它的工作状态很好.链接将滚动到视图中,然后“pin”到底部.对于没有滚动条的页面,链接永远不会启用.我用
JS Fiddle (here)更新了一个例子.关键件是：
HTML：
<!-- child of the body tag -->
<span id="top-link-block" class="hidden">
<a href="#top" class="well well-sm" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
<i class="glyphicon glyphicon-chevron-up"></i> Back to Top
</a>
</span><!-- /top-link-block -->
JS：
<script>
// Only enable if the document has a long scroll bar
// Note the window height + offset
if ( ($(window).height() + 100) < $(document).height() ) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {top:100}
});
}
</script>
CSS：
<style>
#top-link-block.affix-top {
position: absolute; /* allows it to "slide" up into view */
bottom: -82px;
left: 10px;
}
#top-link-block.affix {
position: fixed; /* keeps it on the bottom once in view */
bottom: 18px;
left: 10px;
}
</style>
注意：由于使用固定容器高度计算的错误(Bootstrap Issue#4647),我无法使用affix bottom offset (example)隐藏短页的链接.我确定有一个解决方法,并欢迎解决方法.
