My approach involved identifying a specific set of boxes and setting their position to fixed under certain conditions, particularly when scrolling down. This strategy reminded me of a similar tactic used to keep headers fixed in a report while scrolling.
Although the final line felt a bit unconventional, it effectively achieved the desired result (function not provided).
offset_applied = false; // keeping track of offset application
$boxes = $('#p71_timeline .foreground div.group .topbox');
// trigger this when scrolling the page
$( document ).scroll(function() {
// if scrolling past a certain point, hover over the months
if ($(document).scrollTop() > 200) {
$boxes
.css(
{'position':'fixed' // float month boxes by setting position fixed
,'z-index':100 // ensure hover over everything
,'top':'44px' // float below the menu
});
// enhancing the floating boxes visually
$('#shade,#shade_left').show();
// shade_left added to lighten extra months shown when hovering.
if (!offset_applied) {
// initially shift all boxes by an offset, likely dependent on y-axis label widths
apex.debug('shift right');
$boxes.css('left','+=247px');
}
// only need to do it once, otherwise it quickly zooms to the right
offset_applied = true;
}
else {
// page scrolled back to the top, maintain original position
$boxes.css({'position':'absolute','top':'5px'});
$('#shade,#shade_left').hide();
if (offset_applied){
// reverse the offset only once
apex.debug('shift left');
$boxes.css('left','-=247px');
}
offset_applied = false;
} // scroll position
});
// Check box placement after allowing the chart to render
// Reapply if page was loaded with scrolling down
setTimeout(function(){_check_placement();}, 1000);
In addition, I included a region with partial opacity (#shade) to provide a background for the hovering boxes and enhance the overall presentation.