Foundation-sites: Problem with Sticky Navigation - Foundation 6.4.3

[antopossegithub]

Hi I wanted to make it known that the Sticky element in foundation 6.4.3 does not work so well. I refer with precision to the sticky navigation. When you scan the page the elements immediately below the navbar snap and hop.

I tested this issue on Firefox, Chrome and Safari in desktop version and It is visible on your own
https://codepen.io/IamManchanda/pen/aWaJpM?editors=1010

[ncoden]

This seems to come from the navigation bar not having the same height while being sticked or not. When its status change, Foundation will check its height and apply it to the sticky container, so it keep the same height even with its content out of the flow (in position: fixed;).

To fix this, we could measure the content height one time to set the container height, and do not change it later when sticked. This could be an option, like staticHeight.

@antopossegithub What do you think ?

[antopossegithub]

Yes but it's static as a solution!!
It's a shame :(

[ncoden]

Well, the goal of sticky navigation is to allow components to go sticky without affecting the rest of the page, like if the component stayed at the same place.

But at this time, the component is visually _away_. If this component change while being sticky, the page should not be affected.

[antopossegithub]

Very well, it was just what I wanted to say. We hope to release a future update to solve this problem too.
In your opinion, do I already know about this?

[ncoden]

In your opinion, do I already know about this?

Hmm... I'm not sure to understand you. Are you asking it we will release this fix soon ?

[antopossegithub]

Yes I meant to say this, sorry for my english :(

[ncoden]

Don't worry.
We'll try to fix this for v6.4.4. This release was frozen for months but we began to hardly work on it recently. This could be deployed in 2-4 weeks.

[antopossegithub]

You're the best :)
So, good work, and thank you!!

[ncoden]

Hi @antopossegithub

See https://github.com/zurb/foundation-sites/pull/10875

Does it solve your issue ?

[ncoden]

This is a new feature and not a bug fix. So I delay this to the next minor release v6.5.0.

[antopossegithub]

Can you provide a codepen to show your final result.
I've tried your solution but it didn't worked

[ncoden]

@antopossegithub Did you disabled the dynamicHeight option in Sticky ?

[antopossegithub]

Yes but if I deactivate this function, the menu is no longer sticky

data-options="marginTop:0;dynamicHeight:false;" style="width:100%" dynaminHeight="false"

[ncoden]

Hi @antopossegithub,

This should be fixed now. I am sorry, I did not tested this correctly (with the dynamicHeight option set to false _before_ the component is initialized).

[antopossegithub]

Good job 👍
it works properly. Thanks a lot!!

Did you include this fix in the next release?
When will the next release come out?

[ncoden]

The PR will be merged after @colin-marshall reviewed it. Since it adds a new feature, it should be released in Foundation v6.5.0 in about a month.