Why?
This has taken me too long to figure out and I hope I don't lose this note again. The only website that was titled similarly kept slowing down my computer too much so I decided to work out my own. The complexity is due to content also being dynamically resized in height.

What?
Basically I have a menu in a sidebar, I don't want it to overlap the header nor the footer.I have a content page next to it which changes in height dynamically (a separate mootool function to this one).

How?
So this is my take on it, if anyone has a better idea, I'd really appreciate it. 
window.addEvent('scroll', function() {

    var menu_highest_top = $('jdo_marker_table').getCoordinates().top;
    var menu_height = $('jdo_actions').getCoordinates().height;
    var component_top = $('jdo_overall').getCoordinates().top;
    var component_height = $('jdo_overall').getCoordinates().height;
	var match_lowest_y = component_height + component_top - menu_height;
	var match_highest_y = menu_highest_top + (component_top - menu_highest_top);

	if( window.XMLHttpRequest ) {
		if (document.documentElement.scrollTop > menu_highest_top || self.pageYOffset > menu_highest_top) {
			if (document.documentElement.scrollTop > match_lowest_y || self.pageYOffset > match_lowest_y) {
				$('jdo_actions').style.position = 'absolute';
				$('jdo_actions').style.top = match_lowest_y + 'px';
			} else {
				$('jdo_actions').style.position = 'fixed';
				$('jdo_actions').style.top = '5px';
			}
		} else {
			$('jdo_actions').style.position = 'relative';
			$('jdo_actions').style.top = '0px';
		}
	}
});
// still to do: smoothscroll? if already overlaps then flicks up