How can I make an element on my page scroll with the page until a certain point, and then switch to fixed position when another moving element interacts with it? The issue I'm facing is that when it switches to fixed position, it jumps down to its original position on the page. Is there a way to maintain its position when it becomes fixed instead of jumping back?
Here's the code snippet:
jQuery(window).scroll(function (event) {
var top = jQuery("accordion").offset().top - parseFloat(jQuery("#accordion").css("marginTop").replace(/auto/, 0));
// determine the y position of the scroll
var y = jQuery( "#navigation" ).offset().top + jQuery( "#navigation" ).height();
if (y >= top) {
// add the fixed class if necessary
jQuery("#accordion").css('position','fixed');
} else {
// remove the fixed class if not needed
jQuery("#options_accordion").css('position', '');
}
});