Mootools - How to contain a menu sidebar between header and footer

: Category: MooTools Framework; 10 August 2012; Hits: 15425

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.

copy raw

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

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