CSS Fixed-position Nav that slides away at page bottom - css

Question

I'm working on my website, http://www.perezfox.com, which features a fixed-position navigation menu. I'm happy with how this operates, but there is a problem with vertically-challenged browser windows. Users who scroll to the bottom will see the nav overlapping with the footer because their browsers don't have enough vertical space to accommodate both.
Is there a way to "push" the otherwise-static nav menu up as the page bottom approaches? Perhaps specify a distance-to-bottom that will override the position: fixed style? A friend has suggested that I need to monitor the page position and "fire an event", but I'm not sure what that means in practical terms.
I'm comfortable with CSS and HTML, but more of a beginning with Javascript and jQuery. Any advice is graciously appreciated, keeping that in mind. For example, you might have to say something to the effect of "put this within a script tag within your site head ..."
Thanks in advance!
EDIT
I found a few examples of this behaviour, but most of them are reversed. For example:
http://www.madebyparachute.com/products
On this site, the [left column] navigation elements start scrollable, become fixed. I want to have mine start fixed, become scrollable. Also, this one concerns the top, whereas mine concerns the bottom. But I image it's similar functionality at work, no?
I appreciate everyone leaving feedback but after a very frustrating day with this stuff, I must beg and plead that you please, please, don't just throw code at me. I need a bit of instruction, especially if there are script, CSS, and HTML components working in concert.
Also, note that I'm using the HTML5 elements for <nav> and <footer>, and not the traditional <div id="whatever">.
Thanks!!!

Answer 1

If you don't mind not supporting older browsers, you can use CSS3 Media Queries to change the styling when the window gets too short. It might look something like:
#media screen and (max-height:300px) {
navigation-element {
position:relative;
}
}
Note that for IE this only works in 9+. Other browsers are fine, i think.
Edit
If you need older browser support, you could do something like:
window.onresize = funciton() {
var sidebar = document.getElementById("idOfSidebar");
sidebar.style.position="relative";
//other styling stuff here
}

Answer 2

You can use jquery to set the nav to have relative positioning if the height of the browser is too small using the css function.
It might look something like this:
$(window).resize(function() {
if($(document).height() <= someNumber){
$("#nav").css('position', 'static');
} else {
$("#nav").css('position', 'fixed');
}
});