我在(粘性)滚动侧边栏工作.问题是大多数粘性侧边栏没有考虑到边栏可以比视口更高(例如,如果许多项目被添加到篮子(侧边栏)).我正在试图解决什么？这些是要求：
>如果侧边栏的高度高于视口,应该是
滚动内容,并且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);
});
}
});
解决方法
您正在使用边距来移动粘性侧边栏 – 我发现这是一个棘手的方法来处理您当前的问题(并且可能更重的方式).
一般来说,我喜欢在侧边栏中添加一个类,使其成为“位置：固定”,这样浏览器就会保持锁定状态.
对于你当前的问题,你只需要根据它们滚动的距离,以编程方式滚动该位置固定的div(这也是100％的高度).看看我的例子,看看这是否是你以后的效果：http://jsfiddle.net/ZHP52/1/
这里是jquery：
jQuery(document).ready(function($) {
var $sidebar = $('.sidebar'),$content = $('.content');
//Since our CSS is going to monkey with the height as you scroll,I need to know the initial height.
var sidebarHeight = $sidebar.height();
if ($sidebar.length > 0 && $content.length > 0) {
var $window = $(window),timer;
$window.scroll(function() {
if ($content.height() > sidebarHeight) {
var new_margin = $window.scrollTop() - offset.top;
if ($window.scrollTop() > offset.top) {
// Fix sidebar
$sidebar.addClass("fixed");
// Scroll it the appropriate ammount
$sidebar.scrollTop(new_margin);
}else{
$sidebar.removeClass("fixed");
}
}
});
}
});
