CODEWITHSUNDEEP
jquery
David Stančík
David Stančík

Reputation: 350

Hide icon with jQuery

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...

Upvotes: 5

Views: 3412

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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.

Upvotes: 4

rrk
rrk

Reputation: 15846

Bind the 'scroll' event on window to function which 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>

If you want to show it on scroll to top again do the following.

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

Upvotes: 3

Related Questions