Geek asks and answers

Scroll a few sections of the sidebar down the screen, like 9gag.com

Stack

Basically, I need a homepage with multiple posts stacked on top of each other, like techcrunch or basically any blog. With each message, I would like to have a sidebar that floats down the page next to the message when you scroll, so that the user can easily publish the message through Facebook, for example, a button or anything, without having to scroll back to the top of the message.

When a person gets to the bottom of each message, the sidebar stops floating around the screen, and when the peson continues to scroll to the next message, the next sidebar of the message starts to float down, etc.

A great example is the 9gag.com page. Notice how the message heading, the favorites button, and social buttons float next to each message / image.

I'm trying to use the jquery scrolltofixed plugin to accomplish this, but I'm stuck. I can get the div sidebar to start scrolling the page correctly, but I can't get them to stop scrolling when you get to the bottom of each message so that they just start overlapping.

Typically, you cannot scroll them using the "limit" attribute, which is built into scrolltofixed as follows:

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

This will cause the sidebar window to not scroll from the screen after scrolling to 3000 pixels.

, , + - , , .

:

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

. , "" .

, ?

UPDATE: , . . , , .

, :

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

?

+2
2

, : http://jsfiddle.net/y3qV5/760/.

scrolltofixed, : https://github.com/bigspotteddog/ScrollToFixed

, limit . , .

EDIT: "" , .

, , , - 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
        });
    }
});
+4

.scrollTop() - - ​​ , . scrollToTop, , $(this).siblings('.accompanying-post-class').offset().top.

0

More articles:


All Articles