Foundation-sites: [Sticky] EmCalc function is calculated using the body font-size

[borref]

What should happen?

Sticky Component is using the emCalc function to calculate the given margins in em to px. So if the component font-size is 10px and the margin-top from options is 6, then I'd expect the result to be 60.

What happens instead?

Since the calculation is using the document.body font-size, the result is completely different. Taking the previous example where we expect 60, in the case the body font-size has a different value, i.e., 16px the output will be 96. And it's making the component to be stuck before the actual initial point.

function emCalc(em) {
  return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
}

_Taken from:_ https://github.com/zurb/foundation-sites/blob/ee8be185dc0d4133077471fe4c3a59fc0cb3de1e/js/foundation.sticky.js#L513

Possible Solution

Use the component's font-size instead. Unless this is an intended behaviour, in that case a different name would be great.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/borref/pen/pOdEoe?editors=1111

How to reproduce:
By default.

Environment

• Foundation version(s) used: 6.4.3

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

[arjendejong12]

Could this be the reason for the problem I've been experiencing with the Sticky being 'stuck' at the top? #11299

[ncoden]

Working on a fix on this, and various others Sticky bugs.