更新答案

Question

想要在#logo中替换图像resized.png，向下滚动并向上滚动应该恢复正常。

尝试使用代码

<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确实名列前茅，但想要完全替换它并在滚动到顶部时恢复。该网站的链接是：http://elementsmart.com/product/deep-azure-rajasthani-necklace-set/ 可以总结一下吗？

Answer 1

更新答案

点击此处，阅读DEMO http://jsfiddle.net/yeyene/49HA3/1/

您试图将背景图片错误地提供给a代码，实际上您需要更改img代码中a代码的src。

这就是为什么，你有2张图片。一个用于a标记背景图片，另一个用于img标记内的a。

$(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');
        }
    });
});

在向下滚动时替换div中的图像

1 个答案:

更新答案