像 9gag.com 一样在屏幕上滚动多个侧边栏 div

Question

堆栈，

基本上，我想要一个主页，其中包含多个堆叠在一起的帖子，例如 techcrunch 或基本上任何博客。对于每个帖子，我希望有一个侧边栏框，当您滚动时，它会在帖子旁边的页面下方浮动，以便用户可以通过类似 facebook 的按钮或其他任何方式轻松分享帖子，而无需滚动回顶部帖子。

当人物到达每个帖子的底部时，侧边栏停止在屏幕上向下浮动，当人物继续滚动到下一个帖子时，下一个帖子的侧边栏开始向下浮动，依此类推。

9gag.com 主页就是一个很好的例子。请注意帖子标题、收藏按钮和社交按钮如何浮动在每个帖子/图片旁边。

我正在尝试使用 jquery 的 scrolltofixed 插件来完成此操作，但我被卡住了。我可以让侧边栏 div 开始正确地向下滚动页面，但是当您到达每个帖子的底部时，我无法让它们停止滚动，因此它们只是开始相互重叠。

通常，您可以使用内置于 scrolltofixed 的“limit”属性来阻止它们滚动，如下所示：

$('.class-of-sidebar-box-div').scrollToFixed({
limit: 3000
});

一旦您向下滚动 3000 像素，这将阻止边栏框随屏幕滚动。

我试图做的是动态设置每个随附帖子的高度限制 + 随附帖子的顶部偏移量 - 侧边栏框的高度，以便在每个侧边栏框到达时停止滚动随附帖子的底部。

示例代码：

$('.class-of-sidebar-box-div').scrollToFixed({
limit: function(){
    var postoffset = $(this).siblings('.accompanying-post-class').offset().top;
    var postheight = $(this).siblings('.accompanying-post-class').height();
    var sidbardivheight = $(this).height();
    var scrolllimit = postoffset + postheight - sidbardivheight ;
    return scrolllimit;
    }
});

这是失败的。侧边栏框开始正确浮动，但未正确设置“限制”。

任何想法我哪里出错了？

更新：修复了 Billiand 建议的示例代码。但是，仍然没有设置限制。另外，我尝试了一个更简单的功能，如下所示，即使它不起作用。

同样失败的更简单的例子：

$('.class-of-sidebar-box-div').scrollToFixed({
limit: function(){
    var scrolllimit = 1000;
    return scrolllimit;
    }
});

想法？

Answer 1

请看一下这个小提琴：http://jsfiddle.net/y3qV5/760/。

它使用了你上面提到的scrolltofixed插件：https://github.com/bigspotteddog/ScrollToFixed

很遗憾，limit 选项此时没有发挥作用。好主意，下一个版本应该有。

编辑：最新版本的插件现在支持“limit”作为函数和值。

为了获得与您上面描述的类似的效果，我所做的是将限制设置为下一部分的 offset().top 减去侧边栏高度加上一些填充，就像您上面描述的那样。知道 limit 选项不接受函数将有助于解决混淆：

$(document).ready(function() {
    $('#cart1').scrollToFixed({
        marginTop: 10,
        limit: $('#p2').offset().top - $('#cart1').height() - 10
    });
    $('#cart2').scrollToFixed({
        marginTop: 10,
        limit: $('#p3').offset().top - $('#cart2').height()
    });
});

而且，正如您在下面的评论中提到的那样，这是一种遍历购物车以将它们设置在各自的 div 旁边的方法：

$(document).ready(function() {
    for (i = 1; i <= $('.cart').length; i++) {
        $('#cart' + i).scrollToFixed({
            marginTop: 10,
            limit: $('#p' + (i + 1)).offset().top - $('#cart' + i).height() - 10
        });
    }
});

Answer 2

.scrollTop() 是错误的函数 - 它会随着用户向下滚动而增加，从而阻止实际达到限制。查看scrollToTop文档，我想你想要的是$(this).siblings('.accompanying-post-class').offset().top。