Question

I know title is a bit confusing ;D but basically what I want to do is clearly demonstrated on this website http://9gag.com scroll down and pay attention to sidebar, there are 2 advertisements once 2nd advertisement reaches top of the page it starts scrolling down with a page.

I would like to know how to do this? html/css or jQuery solutions are prefared.

Answer 1

As Kevin points out, what you need to do is to listen to the document’s scroll event. When that is fired, you’ll want to look at the value of scrollTop.

$(document).scroll(function() {

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue;
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar);

});

And your CSS would basically look like this:

.my-sidebar-items.fixedSidebar { position: fixed; }

A complicating factor is that you’ll probably want the items to be fixed in their new, top positions, and you would want to do something like this:

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 }

However, that would probably stack your items on top of one another. A solution to that would be to put the fixedSidebar class on a container, and use the class as described.

Demo