Foundation-sites: Accordion + Sticky

[jinch]

I have noticed using the 'Accordion' along with the 'Sticky' feature generates a few rendering issues. If you expand the accordion menu the row underneath will overlap. It seems as though the height is not recalculated when expanded and the sticky positioned menu only remembers the initial height of when it is first loaded. I have heard the .sticky feature may be getting a full re-write to address a few other issues that deal with off-canvas ~ but does anyone know if there is a fix or a workaround to this issue as well?

The example below demonstrates the issue:
http://codepen.io/jinch/full/KmGdwK/

[orangedaisy]

In your example, the sidebar overlaps because it has a higher z-index than your footer row. To avoid this issue, you could either control the applied range of the sticky element, or increase the z-index of your footer row with something like

.my-special-footer {
  position: relative;
  z-index: 10;
}

[rafibomb]

@orangedaisy Right on! @jinch Changed your example to demonstrate : http://codepen.io/rafibomb/pen/ZKVLOg?editors=1000

Closing this as it is not a bug - thanks!

[jinch]

Thanks, @orangedaisy, @rafibomb - this is helpful.

I'll apply this workaround to my project though not exactly what I was hoping, this should do the trick. Probably not possible but ideally it would be great if the height can be dynamic and restrict range based on the expanded content. ~ this does the job for now though and it's appreciated.

[rafibomb]

@jinch Might be good for a feature request for sticky - I know sticky is getting worked on for a nearby release. That's something you can post separately :)