I'm attempting to create a layout where there is a horizontal menu under the logo, and when the user scrolls past the logo the menu becomes fixed at the top.

```
$(window).scroll(function(e) {
    $el = $('#menu');
    if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
        $('#menu').css({'position': 'fixed', 'top': '0px'});
        $('#content-text').css({'margin-top': '50px'});
    }
    if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
        $('#menu').css({'position': 'static', 'top': '100px'});
        $('#content-text').css({'margin-top': '0px'});
    }
});

```

In doing so I also have to change the `margin-top` of the main content, otherwise it jumps.

Example:

<http://jsfiddle.net/7R89x/>

While the fixed menu appears to be working, when I change the margin on the content section it now overlaps the footer at the bottom of the page. How can I fix this?