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

what is your expected result? can you give a better description? — rrk, Sep 14 '15 at 17:54
Yes, of course..I land on my page, there is right at landing an arrow facing down (for users to know that they should scroll down, its called UX or UI), no, Because of some weird responsive problems, I want to make that icon(arrow_down) hidden, right when the user starts scrolling down... do You catch It?? :) @Rejith R Krishnan — David Stančík, Sep 14 '15 at 18:01
I'm sorry, but I am not understanding what is missing in my answer. — rrk, Sep 14 '15 at 18:04
Your answer is great... THANKS!!! but I just dont know how to... start the code.. please write me whole code... because just: jQuery(window).on('scroll', function() { jQuery('.arrow_down').hide(); }); itselve doesnt work — David Stančík, Sep 14 '15 at 18:08
That **is** *the* whole code. You just need to make sure that you have jQuery included. — Ismael Miguel, Sep 14 '15 at 18:11

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-14T18:13:53.920

4

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.

edited Sep 14 '15 at 18:13

answered Sep 14 '15 at 17:48

Praveen Kumar Purushothaman

164,888
24
203
252

You shouldn't set the `scroll` event inside the `ready` event handler, and definetivelly not using `.on()`. Use `.bind('scroll')` or `.scroll()` – Ismael Miguel Sep 14 '15 at 17:52
@IsmaelMiguel why so? – rrk Sep 14 '15 at 17:53
Because the `.on()` event will try to find a 'common parent' to add the event handler to. And the parent of the `window` is `window`. So, unnecessary work. And then, everytime the `scroll` event is triggered, jQuery verifies if this is the object that is the target of the event, which is bad because that kind of event is triggered hundreds of times. That won't happen using `.bind()`. – Ismael Miguel Sep 14 '15 at 17:57
@IsmaelMiguel Sorry buddy. Corrected it. Thanks for the insight. `:)` – Praveen Kumar Purushothaman Sep 14 '15 at 18:02
You're welcome. I would be extremelly careful with that `curScroll`. It currently had no `var`, which makes it a global variable, completelly free to be edited and ruined by anyone willing to play with your script. At the very least, I would add a `var` to it. – Ismael Miguel Sep 14 '15 at 18:05
1

@IsmaelMiguel Added it. `:)` – Praveen Kumar Purushothaman Sep 14 '15 at 18:06
@PetrCihlar What exactly would you like to happen and what doesn't work? – Praveen Kumar Purushothaman Sep 14 '15 at 18:09
1

Now it looks better! One thing you can try is to use `document.documentElement.scrollTop` instead of `$(window).scrollTop()`. This was based on http://stackoverflow.com/a/2481776/2729937 which has a cross-browser way to get the scroll position. But I would leave it as an exercise to the O.P. – Ismael Miguel Sep 14 '15 at 18:10
OK, now... I will show You my website, that I am doing it for.. You can check what I am doing bad... and why it doesnt work. http://david.addagio.cz And... the script is right at the bottom of source, and the arrow_down is that white arrow you hould see right from landing – David Stančík Sep 14 '15 at 18:12
@PetrCihlar Tell me one thing. Should it be displayed when you land on the page or not? – Praveen Kumar Purushothaman Sep 14 '15 at 18:13
@PetrCihlar Can you see my edit? The second line `$('.arrow_down').hide();`. – Praveen Kumar Purushothaman Sep 14 '15 at 18:14
@Praaven Kumar Yep, it should – David Stančík Sep 14 '15 at 18:14
You mean... it actually works? even without any fixes? Now? – David Stančík Sep 14 '15 at 18:16
Mybe browser? what browser R U using? – David Stančík Sep 14 '15 at 18:17
1

Well, it still doesnt work there... Maybe my computer.. but still BIG BIG thanks for help :) – David Stančík Sep 14 '15 at 18:21

rrk · Answer 2 · 2015-09-14T18:11:36.187

3

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);
});

edited Sep 14 '15 at 18:11

answered Sep 14 '15 at 17:46

rrk

15,677
4
29
45

@PetrCihlar This is the right answer. You just have to make minimal changes to the event handler for it to work. – Ismael Miguel Sep 14 '15 at 17:50
@Ismael Miguel What changes do you mean? – David Stančík Sep 14 '15 at 17:51
1

@PraveenKumar It seems there must be more to the question than meets the eye. `:P` – rrk Sep 14 '15 at 17:51
@RejithRKrishnan The O.P. wants the image to show when you scroll up again. Which is easily done. Just copy-paste the code in the handler, almost. Instead of that huge `if`, maybe using `$(window).scrollTop()` or similar would be enough. – Ismael Miguel Sep 14 '15 at 17:53
And guys.... how to do that handler... I have no idea.. just: jQuery(window).on('scroll', function() { jQuery('.arrow_down').hide(); }); doesnt work alone, how to start it.. you know what i mean – David Stančík Sep 14 '15 at 18:06
@PetrCihlar make sure that the code is inside `` tag. I think you know that, just making sure. – rrk Sep 14 '15 at 18:14

Hide icon with jQuery

2 Answers2