Scroll Images up and then over lap them on top of each other

Scroll Images up and then over lap them on top of each other

Hello 

quick question, i want to create an effect where the images scroll up the page and then get fixed at the top, when they reach the top they get stacked on top of each other sort of like this  http://denicler.eu/en/lookbooks/2

ive set my z indexes on my images so when they reach the top they get stacked but cant seem to fix the images to the top when they reach it.. 

got this so far any help would be great...

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#lookbook img').offset().top)
            $('#lookbook img').addClass('fixed');
        else
            $('#lookbook img').removeClass('fixed');
    } );

} );