Sliding a div in with jQuery on scroll event
<p>I'm using jQuery to fade in a "slide" at the bottom of my page, it's a little tab that's supposed to stick to the right side. I'm currently fading it on a delay, but I'd like to fade it in when the user scrolls down.</p>

<p>This, though, keeps sliding the div across the page, instead of leaving it stuck to the side.</p>

<pre><code>   $(function() {
        var slide = $("div[data-slide='true']");

        $(window).scroll(function() {
            var pos = $(document).scrollTop();
            console.log(pos);
            if ($(document).scrollTop() &gt; 400) {
                 slide.animate({opacity: 1,right:'+=350'},1350, 'swing').stop();

           } else {
                 slide.clearQueue().animate({opacity: 0,right:'-=350'},500, 'easeOutBounce');
           }
        });

    });
</code></pre>

<p>How do I stop the sliding once the initial waypoint is reached? I seem to be able to unbind the scroll event with <code>$(window).unbind('scroll');</code> but then the slide never animates.</p>
