Question

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

向下滚动页面200px后，图像会改变大小。

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

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

这很容易实现???

感谢您的帮助。请更新我的小提琴。

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

}

Answer 2

试试$(document).scrollTop() 也不要忘记$(document).ready(function(){ }); 否则打开你的控制台并找到错误：）

如何使jquery显示和隐藏图像

2 个答案: