滚动多个边栏divs下来的屏幕像9gag.com [英] scroll multiple sidebar divs down the screen like 9gag.com does

问题描述

Stack，

基本上，我想要一个主页，多个帖子堆叠在一起，如techcrunch或基本上任何博客。每个帖子，我想有一个侧边栏，浮动下来的页面旁边的帖子，因为你滚动，所以用户可以轻松地通过Facebook的按钮或任何内容，而不必滚动到顶部

当人到达每个帖子的底部时，侧边栏停止在屏幕上浮动，当peson继续滚动到下一个帖子时，下一个

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

我试图使用jquery的scrolltofixed插件来完成这个，但是我被卡住了。我可以得到侧边栏divs开始向下滚动页面正确，但我不能让他们停止滚动，当你到达每个帖子的底部，所以他们刚开始重叠在彼此。

通常，您可以使用scrolltofixed中内置的limit属性来阻止它们滚动：

  $（'。class-of-sidebar-box-div'）。scrollToFixed（{
 limit：3000 
}）; 
  

当您向下滚动3000像素时，将停止边栏框随屏幕滚动。 / p>

我试图做的是动态设置限制为每个伴随的帖子的高度+相关帖子的顶部偏移量 - 侧边栏框的高度为了

示例代码：

  $（'。class-of-sidebar-box-div'）。scrollToFixed（{
 limit：function（）{
 var postoffset = $（this）。 sblings（'。accompanying-post-class'）。offset（）。top; 
 var postheight = $（this）.siblings var sidbardivheight = $（this）.height（）; 
 var scrolllimit = postoffset + postheight  -  sidbardivheight; 
 return scrolllimit; 
} 
} 
  

这是失败。

任何想法，我错了？

UPDATE：修复了Brilliand建议的示例代码。但是，限制仍未设置。此外，我尝试了一个更简单的函数，如下，甚至它不工作。

更简单的例子也失败：

  $（'。class-of-sidebar-box-div'）。scrollToFixed（{
 limit：function（）{
 var scrolllimit = 1000; 
 return scrolllimit; 
} 
}）; 
  

想法？

解决方案

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

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

不幸的是，limit选项目前不支持函数。很好的想法和下一个版本应该有这个。

编辑：插件的最新版本现在支持限制作为一个函数，

我已经做了什么来获得类似上面描述的效果是设置offset（）的限制。部分减去边栏高度加上一些填充，就像你上面所描述的。知道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 
}）; 
} 
 }）; 
  

Stack,

Basically, I want a homepage with multiple posts stacked on top of each other like techcrunch or basically any blog. With each post, I'd like to have a sidebar box that floats down the page next to the post as you scroll so the user can easily share the post via a facebook like button or whatever without having to scroll back up to the top of the post.

When the person gets to the bottom of each post, the sidebar stops floating down the screen, and when the peson keeps scrolling to the next post, the next post's sidebar begins to float down and so on.

A perfect example is the 9gag.com homepage. Notice how the post title, favorite button, and social buttons, float next to each post/picture.

I'm trying to use jquery's scrolltofixed plugin to accomplish this, but I'm getting stuck. I can get the sidebar divs to begin scrolling down the page correctly, but I can't get them to stop scrolling when you get to the bottom of each post so they just begin to overlap on each other.

Typically, you would stop them from scrolling using the "limit" attribute that is built into scrolltofixed like so:

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

This would stop the sidebar box from scrolling with the screen once you've scrolled down 3000 pixels.

What I tried to do, was dynamically set the limit to the height of each accompanying post + the top offset of the accompanying post - the height of the sidebar box in order to stop each sidebar box from scrolling when it got to the bottom of the accompanying post.

Example code:

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

This is failing. The sidebar boxes start floating correctly, but the "limit" is not being set correctly.

Any ideas where I've gone wrong?

UPDATE: Fixed example code as suggested by Brilliand. However, the limit is still not being set. Additionally, I tried a simpler function as follows and even it didn't work.

Simpler example that also failed:

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

Thoughts?

解决方案

Please take a look at this fiddle: http://jsfiddle.net/y3qV5/760/.

It is using the scrolltofixed plugin you mentioned above: https://github.com/bigspotteddog/ScrollToFixed

Unfortunately, the limit option does not take a function at this time. Great idea though and the next version should have that.

EDIT: the latest version of the plugin now supports "limit" as a function as well as a value.

What I have done to get a similar effect to what you have described above is to set the limit to the offset().top of the next section minus the sidebar height plus some padding, just as you described above. Knowing that the limit option will not accept a function will help with the confusion:

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

And, here is a way to iterate over the carts to set them next to their respective divs as you mentioned in your comment below:

$(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
        });
    }
});

这篇关于滚动多个边栏divs下来的屏幕像9gag.com的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！