how to achieve such a scrolling div with changing css?

Question

This site has a scrolling div on the left. As you scroll the page the div also scrolls rhythmically and the color of the image also gets changed. position:fixed is not all that can do it .

What is the technique then ?

EDIT:

position:fixed is all that I can use to get a div fixed at a location with the page scrolling. But how to add the rhythm of the changing div? What else research effort do I need to show (negative ranking)?

Answer 1

you can achieve this by using jquery.

var divs = $('.fademe');
$(window).on('scroll', function() {
    var st = $(this).scrollTop();
    if (st > 50 && st < 100) {
        $('.fademe').css({
            'color': '#fff'
        });
    }
    else {
        $('.fademe').css({
            'color': '#000'
        });
    }    
});

this function will change the color of the text in a div when the scroll bar position is between 50 and 100. otherwise the text will be black

you can modify the jquery code above to alter any css you'd like.

try it yourself here http://jsfiddle.net/J8XaX/29/

added bounce with this one http://jsfiddle.net/J8XaX/43/

Hope this helps