scrollTop（）上的fadeOut（）== 0不起作用

Question

I got a little Icon on my page which should fade in when I am on the top of my page. When I scroll down a bit, it should fade out. But when i go back up again, it reappears. I thought that should work with this code:

 if ($(document).scrollTop() === 0){
    $('#down').fadeIn(200);
    console.log("Hi");
  }
  else{
    $('#down').fadeOut(200);
    console.log("Bye");
  }

but obviously it doesn't. Here's a little codepen

Answer 1

You need to add it inside onscroll functionality. For example:

 $(window).scroll(function(){

  });

or

$( "#down" ).scroll(function() {
});