jQuery: Trigger different events at different scroll positions
<p>I'm having trouble triggering two events – one at one scroll position, one at another.<br>
As you'll see below I'm trying to have <code>div</code> <code>#one</code> appear once the user reaches <code>300px</code>, while <code>div</code> <code>#two</code> will appear after <code>600px</code>.  </p>

<p>CSS:</p>

<pre><code>    &lt;style type='text/css'&gt;
        body {
            height:5000px;   
        }

        #base {
            position:fixed;
            width:300px;
            height:250px;
            margin-left:100px;
            margin-top:0;
            background-color:blue;   
            z-index:1;   
        }

        .feature {
            position:fixed;
            width:300px;
            height:250px;
            margin-left:100px;
            }

        #one {
            margin-top:250px;
            background-color:red;  
            z-index:2;    
            }

        #two {
            margin-top:500px;
            background-color:yellow;  
            z-index:3;    
            }

    &lt;/style&gt;
</code></pre>

<p>JS:</p>

<pre><code>    &lt;script type='text/javascript'&gt;
        $(window).load(function(){
            $(document).ready(function(){

                $(document).scroll(function() {

                    var top = $(document).scrollTop();

                    if (top &gt; 300) {
                        $('#one').show();
                    }
                    else if (top &gt; 600) {
                        $('#two').show();
                    } 
                    else {
                        $('.feature').hide();
                    }   

                });
            });
        });

    &lt;/script&gt;
</code></pre>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;div id="base"&gt;&lt;/div&gt;
    &lt;div id="one" class="feature"&gt;&lt;/div&gt;
    &lt;div id="two" class="feature"&gt;&lt;/div&gt;  
&lt;/body&gt;
</code></pre>
