Question

栈，

基本上，我想要一个多个帖子堆叠在一起的主页，如techcrunch或基本上任何博客。对于每个帖子，我希望有一个侧边栏框，当你滚动时浮动在帖子旁边的页面上，这样用户就可以通过类似Facebook的按钮轻松地分享帖子，或者无需向后滚动到顶部帖子。

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

一个完美的例子是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;
    }
});

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

我出错的任何想法？

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

也失败的更简单的例子：

$('.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

不幸的是，限制选项此时不会执行任何功能。虽然好主意，下一个版本应该有。

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

我所做的是为了获得与上述相似的效果，将限制设置为offset（）。下一部分的顶部减去侧边栏高度加上一些填充，如上所述。知道限制选项不接受函数将有助于混淆：

$(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。

滚动多个侧边栏像9gag.com一样按下屏幕

2 个答案: