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.
copyraw
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
Category: MooTools Framework :: Article: 426
Add comment