JQuery FadeIn/FadeOut on mouse scroll

Question

Hello,

I was wondering if jQuery can handle following action:

I would like to display url links when readers starts to scroll down Blogspot blog page. These links will stay 100% visible all the time until readers scroll the page to the top position (0% visible).

I have found one jQuary, it is here.

But this one works like scroll to the top of the website button. I would like my jQuery works exactly like this but instead of scrolling to the top on mouse click, it will redirect reader to specific url link (on mouse click).

Is it possible to do this?

Thank you.

Answer 1

If you use normal anchors so the click happens like a normal link, you can do this for the fading:

$(function() {
  $(document).scroll(function() {
    if($('body').scrollTop() == 0)
      $("a.hide:visible").fadeOut();
    else 
      $("a.hide:hidden").fadeIn();
  });
});

And this CSS so they're initially hidden:

.hide { display: none; }

Define your links like this:

<a class="hide" href="Http://google.com"&gt;Google Link</a>

This script says if we're at the top ($('body').scrollTop() == 0) fade out the class="hide" links that are visible, if we're not at the top, fade them in. Just assign class="hide" to the links you want to behave this way.