CODEWITHSUNDEEP
javascriptjquery
zak
zak

Reputation: 412

Making a DIV float between header and footer

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?

Upvotes: 1

Views: 1831

Answers (2)

GDW
GDW

Reputation: 238

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.

Upvotes: 1

AndyD
AndyD

Reputation: 895

You could probably just contain the banner within a container which touches the bottom of the header and the top of the footer, then enable scrolling within it's extents.

Upvotes: 1

Related Questions