replace image in div on scroll down

问题:

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

<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100) $('#topbar, .cart-label').fadeOut('slow');
$('#logo').css({'background-image':'url(http://elementsmart.com/wp-content/uploads/2013/06/resized.png)','background-repeat':'no-repeat'})
if($(this).scrollTop() < 100) $('#logo, #topbar, .cart-label').fadeIn('fast');
})
});

resized.png does come on top but wanna replace it altogether and be restored upon scroll to top. the link to the site is :http://elementsmart.com/product/deep-azure-rajasthani-necklace-set/ can sum1 suggest ?

回答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');
        }
    });
});