2

堆，

基本上，我想要一个主页，其中包含多个堆叠在一起的帖子，例如 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;
    }
});

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

有什么想法我哪里出错了吗？

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

也失败的更简单的例子：

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

想法？

4

2 回答 2

4

请看一下这个小提琴：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
        });
    }
});
于 2012-06-19T23:37:31.883 回答
0

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

于 2012-06-12T01:20:10.923 回答