Header changes while the browser scroll down action
<p>I have a Header with fixed position. I need to change that header while the browser scrolls actions. See below my code. It is not working. Pls help me</p>

<pre><code>&lt;style&gt;
    body {
        height: 900px;
    }

    #header {
        height: 40px;
        width: 100%;
        position: fixed;
        top: 0px;
        border: 3px solid green;
    }
&lt;/style&gt;



&lt;body&gt;
&lt;div id="header"&gt; Changing Header&lt;/div&gt;

&lt;script&gt;
$("body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value &gt; 1 )
        $("#header").css({"border" : "3px solid red", "background" : "yellow"});
    else
        $("#header").css({"border" : "3px solid green", "background" : "white"});
});
&lt;/script&gt;
&lt;/body&gt;
</code></pre>
