Question

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?

Answer 1

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