Today’s featured MooTools snippet comes from Joel Lipman. It’s a little piece of code that you can use to contain the menu sidebar if you happen to have a dynamic content page.

Joel’s site consists of a content page that changes its height often. He needed a way to prevent the menu sidebar to overlap the header and the footer; hence he came up with the set of code below which he also decided to share with the rest of us.

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   

If you happen to have a better idea or approach, feel free to let him know about it by hitting him up here.

Incoming search terms for the article:

• javascript menu sidebar
• mootools sidebar
• sidebar menu
• moo tools side bar
• mootools follow sidebar
• mootools pageyoffset
• sidebar на motools
• what contain a menu