Hide icon with jQuery

Question

I have

<img class="arrow_down" src="arrow_down.png" alt="scroll down" style="max-width: 5%; height: auto;">

Now, I want that image visible, until I scroll down the webpage, so from the first scroll it will be hidden. I code it in java-script or jQuery like this:

jQuery(function($, undefined) {
  if ($("body").scrollTop() = 0 || $("html").scrollTop() = 0) {
            $(".arrow_down").fadeIn(400);
        }

        else {
            $(".arrow_down").hide();
        }

    };

This doesn't work, please help me...

Answer 1

You can do something like this:

$(function () {
  $('.arrow_down').hide();
  var curScroll = $(window).scrollTop();
  $(window).scroll(function() {
    if (curScroll < $(window).scrollTop())
      $('.arrow_down').show();
    if ($(window).scrollTop() == 0)
      $('.arrow_down').hide();
    curScroll = $(window).scrollTop();
  });
});

What happens here is, when the scrolling is done, the script checks if the scroll has been done down or up. If the scroll has been only down, then it shows the down arrow.