Foundation-sites: [Sticky] Sticky element loses height when anchored

[KharamanV]

The thing is that when the page is scrolled down - everything is fine, but when then scroll back to top, the sticky element loses its height. Help please, what's the problem?

[lukejoyce]

I encountered this also - it may be a bug unless I configured something wrong. I fixed it with:

.sticky.is-anchored { bottom: auto !important; }

http://stackoverflow.com/questions/35897558/foundation-6-sticky-menu-left-menu-div-pushes-up-when-page-is-scrolled-back-to/35926403#35926403

[iammichiel]

I have solved the issue by setting the background on sub-element.

<div class="sticky">
    <div style="background-color: blue">...</div>
</div>

It seems to be caused by the position property. This work-around however works perfectly.

[colin-marshall]

@iammichiel @lukejoyce thanks for the solutions! The problem I found with both of those was that a sticky element with height: auto will lose its height when it becomes unstuck because of position: absolute.

If you have a minute, please check out my PR #8663 to see a visual test I added, along with a new option called staticHeight that helps with the sticky element losing its height. I will probably try to refactor it so that no option is necessary and the static/variable height detection is done automatically by Sticky. The visual test is also in the develop branch so you can see how it performs before my fix.

Thanks guys!