Problem with jquery

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