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

Question

堆栈，

基本上，我想要一个包含多个帖子的主页，就像 techcrunch 或基本上任何博客一样。对于每个帖子，我希望有一个侧边栏框在您滚动时在帖子旁边的页面下方 float ，以便用户可以轻松地通过类似 facebook 的按钮或其他任何方式分享帖子，而无需向上滚动到顶部帖子。

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

一个完美的例子是 9gag.com 主页。注意帖子标题、收藏按钮和社交按钮如何 float 在每个帖子/图片旁边。

我正在尝试使用 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;
    }
});

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

我哪里出错了？

更新:修复了 Brilliand 建议的示例代码。但是，限制仍未设置。此外，我尝试了一个更简单的函数，如下所示，但它也没有用。

同样失败的简单示例:

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

想法？

Answer 1

请看一下这个 fiddle :http://jsfiddle.net/y3qV5/760/ .

它正在使用您上面提到的 scrolltofixed 插件:https://github.com/bigspotteddog/ScrollToFixed

不幸的是，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
        });
    }
});