Question

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.

    $(window).scroll(function()
    {      
        if ($(window).scrollTop() > headerHeight)            
            $(".banner").css("position", "fixed");                        
        else            
            $(".banner").css("position", "relative");
    }

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.

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

Answer 1

I would recommend you use the stickyfloat jquery plugin!

Demo: http://jsbin.com/eqihef
http://plugins.jquery.com/project/stickyfloat

It’s a great little plugin which gives you a lot of control.