position:fixed floating menu confined to scroll position

Question

I've got a menu which I want to stay in the same position on the page with css:

position:fixed;
top: 0;

But I want the menu to not go outside of a certain area when the page scrolls. Please see this example (scroll the result window).

http://jsfiddle.net/Fg2MA/1/

Can this be done with just CSS, or can someone suggest an elegant JS solution to this?

Many thanks.

Answer 1

I think it will not work without java script (or maybe very tricky css trick?), but if you have the option to use JQuery, the solution is quite simple, just do:

$(document).on('scroll', function () {
    if ($(document).scrollTop() > ($("#container")[0].offsetTop + $("#container").height())) {
        $("#menu").css({
            display: "none",
        });
    }
    else {
       $("#menu").css({
            display: "block",
        }); 
    }
});

In the condition, it checks if the actual scrolling position is under the beginning of the container. If yes, the css of the #menu is changed to display: none; otherwise to display: block;

See Fiddle: http://jsfiddle.net/Fg2MA/3/