Does not respond to changing height of sticky element

[jswitchback]

I have a use case where I needed the sticky element to be a collapsing/expanding menu in the sidebar. Once the sidebar expanded taller than the height of the content, it overlapped the footer. I've solved it by adding a method to recalculate height.

 updateHeight: function() {
    return this.each(function() {
      var stickyElement = $(this);

      var stickyWrapper = stickyElement.parent();
      stickyWrapper.css('height', stickyElement.outerHeight());
    });
  },

And then calling the method on click of an expandable menu item.

 $(...).on('click', function() {
     $('#sticker').sticky('updateHeight');
 });

Perhaps there is a better way? Or maybe this will help someone with the same problem...

[ananaszjoe]

It's a nice way of solving it, but only if the expanding/collapsing is instant. I have a similar use case but my menu items are animated, so I tried to force the sticky wrapper to be height:auto during the animation and then manually set the height once the animation is done, but height:auto causes some other issues. It would be very nice if the wrapper would be height-adaptive or responsive.

[jswitchback]

In your case, would it be possible to update the height on an animationend or transitionend event?

// Respond to elements "animationend" event
$(...).on('animationend webkitAnimationEnd oAnimationEnd', function() {
  // Update height
});

// or respond to elements "transitionend" event
$(...).on('transitionend webkitTransitionEnd oTransitionEnd', function() {
    // Update height
});