Problem with jquery

Hello guys, I have a problem connected with jquery. When a user reaches 500px a picture with id pic-container appears. Below is the code

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 500) {
        $('#pic-container').fadeIn();
    } else {
        $('#pic-container').fadeOut();
    }

});

Now the thing is that when a user go back to top, the picture hides and when coming down to 500px that picture appears again. But I want the picture fade in just one time and not to be hidden when user scrolls up.

Thanks in advance

Never tried this before, but I think you should lose the else block.

didn’t help, here is the pen http://codepen.io/HovhannesMkoyan/pen/KgpAWY?editors=0110

I changed #pic-container's display to none, though I’m not sure if fadeIn() changes this to display: block; afterwards…

EDIT: I console.logged #pic-container's display property and it shows block.

I guess after long searches I found something.
http://stackoverflow.com/questions/9097501/show-div-when-scroll-position
and here is updated pen
http://codepen.io/HovhannesMkoyan/pen/KgpAWY?editors=1010

1 Like