Inspired by a popular codepen example, I have successfully implemented sticky titles in my sidebar. However, when integrating these sticky titles with the functionality to show/hide related items on click, I encountered some unexpected issues. The code snippet below is responsible for handling the sticky titles:
function stickyTitles(stickies)
{
this.load = function()
{
stickies.each(function(){
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}
// More code here...
}
The problem arises because the position calculation from the top gets disrupted when collapsing/expanding items. To address this issue, I attempted to trigger a recalculation of the positions after the items are collapsed or expanded:
var newStickies = new stickyTitles(jQuery(".followMeBar"));
newStickies.load();
jQuery('#container').on("scroll", function() {
newStickies.scroll();
});
Regrettably, it seems that the positions are not recalculated, and the initial positions are maintained even after expanding/collapsing the items. For a visual representation of this issue, you can refer to my JSFiddle: http://jsfiddle.net/vo78hr4x/1/