Making a DIV float between header and footer
<p>I have the below fairly simple java-script function on a webpage with a header, footer and a banner in between the header and footer right side of the body, to make the banner seem to be floating between the header and footer when users scroll the webpage.</p>

<pre><code>    $(window).scroll(function()
    {      
        if ($(window).scrollTop() &gt; headerHeight)            
            $(".banner").css("position", "fixed");                        
        else            
            $(".banner").css("position", "relative");
    }
</code></pre>

<p>I want the banner to be auto scrolled/floated/moved when user scrolls the browser window. The  code works fine: it makes the banner float/move and stops the banner from floating/moving over the header. But I need to add one more condition: the banner must stop floating before the end of webpage is reached because a footer is present. This code now causes the banner to be moving/floating over the footer when user reaches the bottom of the page.</p>

<p>Can anyone help me in getting this condition included in the if block as an or condition?</p>
