Fixed Navigation that stays within its parent div

Question

I'm making a fluid width website, and on one of my pages I have a fixed sidebar. Right now it works fine as I only have two links on it; The sidebar isn't very tall. The layout goes like this:

Header

Content with Sidebar

Footer

The sidebar is positioned fairly far down because of the header, and if it gets too tall it will overflow into the footer. I want it to start and being 'fixed' once it reaches certain heights on the screen

In other words:

1. Relative until scroll down
2. Fixed until reach footer
3. Relative once footer is reached

Answer 1

Oh, I just did this one: use jQuery to check the scroll position of the nav

View source at http://trans.worldvision.com.au/ChildSponsorship/ChildSearch.aspx to see how it works.

You wont be able to achieve this with pure CSS, unfortunately, it will require jQuery or some other JavaScript / library.

Sorry about the layout... The iPad hasnt got a tab key, apparently.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

$(window).scroll(function () {   
               if ($(".csnavHome").position().top < $(window).scrollTop()) {
                   $(".csnav").css("position", "fixed");

                   $(".csnav").css("z-index", "2");
               } else {   
                   $(".csnav").css("position", "relative");
                   $(".csnav").css("z-index", "0");
                   $(".csnav").css("top", "0");
               }
           });