Hide icon using jQuery

Question

I have

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

Now I want the image to be visible until I scroll the web page, so it will be hidden from the first scroll . I encode it in java-script or jQuery as follows:

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

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

    };

This does not 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 when scrolling is completed, the script checks to see if the scrolling has been completed or up. If the scroll was only down, then it shows a down arrow.

Answer 2

Bind the scroll event in the window to a function that hides the image.

jQuery(document).ready(function(){
    if(jQuery(window).scrollTop() != 0)
        jQuery('.arrow_down').hide();
    jQuery(window).on('scroll', function() {
        jQuery('.arrow_down').hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img class="arrow_down" src="http://dummyimage.com/600x400/000/fff" alt="scroll down" style="max-width: 5%; height: auto;"/>
<div style="height:500px;">&nbsp;</div>

Run codeHide result

, .

jQuery(window).on('scroll', function() {
  jQuery('.arrow_down').toggle( $(this).scrollTop() == 0);
});