Scrolling layout - like facebook or google plus right sidebar

Question

Any idea how make a layout like google plus or facebook. You can see at google plus home as example,

at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.

Answer 1

Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).

One technique (which many are based on) is like so (in brief)..

1. Capture the browser's scrolling
2. Get the position from top of chosen element (x)
3. Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.

The same will work in reverse, for example:

var target = $('#div-to-stick');
var div_position = target.offset().top;

$(window).scroll(function() { 
    var y_position = $(window).scrollTop();
    if(y_position > div_position) {
        target.addClass('fixed');
    }
    else {
        target.removeClass('fixed');
    }
}

Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.

Hope this helps.