Show/hide div on window scroll
<p>I have a div element <code>#btns</code> that is hidden by default. It should be displayed on scrolling <code>200px</code> from top and again hidden after <code>500px</code> from top. </p>

<p>Here is my (non-working) code:</p>

<pre><code>$(window).scroll(function() {
    if ($(this).scrollTop()&gt;200) {
        $('#btns').fadeIn();
    } 
    elseif ($(this).scrollTop()&lt;500) {
        $('#btns').fadeIn();
    } else {
        $('#btns').fadeOut();
    }
});
</code></pre>