how to make jquery show and hide image

Question

i am trying to add some functionality to a question i recently posted.

once you scroll down the page 200px the image changes size.

I also want to add the following functions but cant get it to work.

1) when you scroll down the screen i want the background image to disappear but once you scroll back up the page i want it to reappear.

is this easily achieved???

thanks for your help. please update my 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',});
 }

});

Pacuraru Daniel · Accepted Answer · 2013-11-24 23:01:53Z

1

You should deal with the css code by using a class inside css and with jquery, just add and remove that class. Than it's easyer to change stuff.

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

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

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

});

and the css

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

}

answered Nov 24, 2013 at 23:01

Pacuraru Daniel

1,2059 gold badges32 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

uzaky · Accepted Answer · 2013-11-24 22:57:21Z

0

Try $(document).scrollTop() also don't forget $(document).ready(function(){ }); else open your console and find the errors :)

answered Nov 24, 2013 at 22:57

uzaky

397 bronze badges

Collectives™ on Stack Overflow

how to make jquery show and hide image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related