我正在尝试重现此侧边栏:
似乎您只是向下滚动页面,但是一旦您到达侧边栏的底部(并且只要在主容器中还有更多内容要显示),侧边栏就会粘在网页的底部,但是当您向上滚动时,侧栏会向上滚动..
你怎么能重现这个?
干杯!
我正在尝试重现此侧边栏:
似乎您只是向下滚动页面,但是一旦您到达侧边栏的底部(并且只要在主容器中还有更多内容要显示),侧边栏就会粘在网页的底部,但是当您向上滚动时,侧栏会向上滚动..
你怎么能重现这个?
干杯!
我的大部分答案都是从这个问题中借来的。
这是一个基本的 body/sidebar 布局,带有 sidebarAnchor,我们将在 JavaScript/jQuery 中使用。
<div class="container">
<div class="body">
<!-- Body content -->
</div>
<div id="sidebarAnchor"></div>
<div class="sidebar" id="sidebar">
<!-- Sidebar Content -->
</div>
</div>
的CSS。这里最重要的是我们将使用 jQuery 添加的 .sticky 类。其余的只是用于演示布局。
div.container {
overflow: hidden;
width: 100%;
}
div.body {
width: 45%;
float: left;
}
div.sidebar {
width: 45%;
float: right;
}
.stick {
position: fixed;
bottom: 0;
right: 0;
}
还有 jQuery/JS。解释见评论。
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#sidebar'),
$sidebarAnchor = $('#sidebarAnchor');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
检查是否document.body.scrollTop + window.innerHeight
大于或等于侧边栏高度: