jQuery Back-to-Top + StickyFloat + Fade-In on Scroll

Question

I'm currently using jQuery Stickyfloat for a "back to top" button on a page that has alot of content. It works perfectly, however, the link is visible at the top when the user goes to the page. I would like it to be hidden on page load and when the user scrolls down (around 400px), it becomes visible and initiates the stickyfloat. When the user scrolls back up to the page, the link goes away.

The jQuery:

$('a#back-to-top').stickyfloat({duration: 150});

The HTML:

<div id="content">
   // Content goes here
   <a href="#top" id="back-to-top">Top</a>
</div>

The link is absolutely positioned to the main content div. The CSS:

#content {
     position: relative;
}

a#back-to-top {
    position: absolute;
    top:0;
    right:0;
}

How would I go about doing this?

Answer 1

You want to hide the floating element initially via CSS. You can probably initialize the stickyfloat like normal. Then you want to attach a handler to the scroll event of the element being scrolled ( BODY, DIV.. ).

In the handler you want to check the scrollTop of the element. Once it reaches your desired height, fadeIn the floating element.

Vice-versa for hiding it.

.floating-element
{
    display:none
}

$('el').scroll(function(e){
    // check target.scrollTop...
    // fade in target
})