div containing multiple modules dynamic positioning based on page position

Question

hello , i have a website www.bacauacum.ro , i would wish to to have the sidebar (div rightcol ) like on rocketheme main site http://www.rockettheme.com/ , i know that it changes the css style **<div id="sidebar" **class="top" style="margin-top: 0px;** ">** as you scroll down the page it changes into <div id="sidebar" class="float" style="margin-top: 0px; "> and as soon as you reach the bottom of the side bar it changes into <div id="sidebar" class="bottom" style="margin-top: 0px; "> , my question is what javascript code do you need to do this .

Answer 1

http://sparksm.com/scripts/fixedpanel.html

Quickly done in jQuery.

$(window).scroll(function(){
    var a = $('.header').offset().top+$('.header').height(),
    b = $(this).scrollTop() + $('.right').height(), 
    c = $('.footer').offset().top, 
    d = c - $('.right').height();

    if ( $(this).scrollTop() > a ) {
        $('.right').removeClass('topstop').removeClass('bottomstop');
        $('.right').addClass('scrolling');
    }
    if ( $(this).scrollTop() < a ) {
        $('.right').removeClass('scrolling').removeClass('bottomstop');
        $('.right').addClass('topstop');
    }
    if ( $(this).scrollTop() > d) {
        $('.right').removeClass('topstop').removeClass('scrolling');
        $('.right').addClass('bottomstop');
    }
});