jQuery Back-to-Top + StickyFloat + Fade-In on Scroll
<p>I'm currently using <a href="https://gist.github.com/728487" rel="nofollow">jQuery Stickyfloat</a> 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.</p>

<p>The jQuery:</p>

<pre><code>$('a#back-to-top').stickyfloat({duration: 150});
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;div id="content"&gt;
   // Content goes here
   &lt;a href="#top" id="back-to-top"&gt;Top&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>The link is absolutely positioned to the main content div. The CSS:</p>

<pre><code>#content {
     position: relative;
}

a#back-to-top {
    position: absolute;
    top:0;
    right:0;
}
</code></pre>

<p>How would I go about doing this? </p>
