我正在开发一个(固定的)滚动侧边栏。问题是大多数固定的侧边栏没有考虑到侧边栏可能高于视口(例如,如果向购物篮(侧边栏)添加了许多项目)。这就是我要解决的问题。以下是需求:
如果侧边栏的高度比视口高,则应该通过内容滚动,并且在向下滚动时,div 底部应粘着在视口底部。
如果侧边栏的高度比视口高,则只有当您在页面底部时才应显示其下面的 div。
当用户向上滚动时,侧边栏会滚动回顶部并重新粘贴到视口顶部。
如果侧边栏的高度小于视口,则在向下滚动时应从顶部粘着。
总体来说,这是相当复杂的功能,不那么简单(我认为)。我看到的最接近我要实现的效果是这个示例:http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php,但是代码编写方式与我的不符。
至此,我已经做了如下的内容:DEMO
以下是我使用的jQuery代码:
jQuery(document).ready(function($) {
var $sidebar = $('.sidebar'),
$content = $('.content');
if ($sidebar.length > 0 && $content.length > 0) {
var $window = $(window),
offset = $sidebar.offset(),
timer;
$window.scroll(function() {
clearTimeout(timer);
timer = setTimeout(function() {
if ($content.height() > $sidebar.height()) {
var new_margin = $window.scrollTop() - offset.top;
if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
// Following the scroll...
$sidebar.stop().animate({ marginTop: new_margin });
} else if (($sidebar.height()+new_margin) > $content.height()) {
// Reached the bottom...
$sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
} else if ($window.scrollTop() <= offset.top) {
// Initial position...
$sidebar.stop().animate({ marginTop: 0 });
}
}
}, 100);
});
}
});