javascript - 如何让jquery显示和隐藏图像

Question

我正在尝试为我最近发布的问题添加一些功能。

一旦您向下滚动页面 200 像素，图像就会改变大小。

我还想添加以下功能，但无法使其工作。

1) 当您向下滚动屏幕时，我希望背景图像消失，但一旦您向上滚动页面，我希望它重新出现。

这很容易实现吗？？？

感谢您的帮助。请更新我的 fiddle 。

http://jsfiddle.net/LLbAu/6/

$( window ).scroll(function() {
 if($(window).scrollTop() > 200){

    $("#profile-pic-bg img").css({ 
        "position": "absolute", 
        "top": "20px", 
        "left":"5px" ,
        "width":'50px'
    });

 }else{
     $('#profile-pic-bg img').css({'width': '145px',});
 }

});

Answer 1

您应该通过使用 css 中的类和 jquery 来处理 css 代码，只需添加和删除该类即可。比更改内容更容易。

$( window ).scroll(function() {
 if($(this).scrollTop() > 200)

    $("#profile-pic-bg img").addClass('scrolled');

 else
     $("#profile-pic-bg img").removeClass('scrolled');

});

和CSS

    #profile-pic-bg img {
            position: absolute;
            top: 20px; 
            left: 5px;
            width:50px;
    }
#profile-pic-bg img.scrolled {
    width: 145px;
}