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) {
    } else {


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

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.
and here is updated pen

1 Like