replace image in div on scroll down

Question

wanna replace the image in #logo with the image resized.png upon scroll down and on scroll up should return to normal.

tried with the code

Answer 1

UPDATE ANSWER

Check here, working DEMO http://jsfiddle.net/yeyene/49HA3/1/

You are trying to give background-image wrongly to a tag, actually you need to change the src of img tag within a tag.

That is why, you got 2 images. One for a tag background-image, another is img within a tag.

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('#topbar, .cart-label').fadeOut('slow');
            $('#logo-img img')
                .css({'width':'184px','height':'33px'})
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/resized.png');
        }
        if($(this).scrollTop() < 100) {
            $('#logo, #topbar, .cart-label').fadeIn('fast');
            $('#logo-img img')
                .css({'width':'184px','height':'60px'})    
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/logo2.png');
        }
    });
});