1

I'm having an issue with the Magellan sticky nav in Zurb Foundation. I have a form where users can add as many elements as they need to, which increases the HTML and div heights. The sticky nav works fine until content is added to the page, at which point the sticky nav will stop being sticky at the original page height (it thinks it's hitting the footer/bottom). If I resize the browser after adding content the sticky nav will snap back into place and use the new heights to determine when to stop. Is there a way I can trigger this so that when new content is added to the page the sticky nav will adjust to the new heights?

Example Here is the nav (both left and right) sticking properly. enter image description here

After I add a "Performance of Understanding" and thus increase the div/page height, the nav does not stick anymore when scrolling and instead stops where the footer/bottom used to be since it is not working on an updated page height. enter image description here

mcriecken
  • 3,217
  • 2
  • 20
  • 23
  • Are you calling this after adding new content?: `$(document).foundation('magellan-expedition', 'reflow');` – Yass Jan 22 '16 at 20:48
  • Wow, not sure how I missed that one in the docs. Thanks for pointing it out. Although, I am getting the following error when trying to call that: "Uncaught ReferenceError: We're sorry, 'magellan-expedition' is not an available method for this element." – mcriecken Jan 25 '16 at 19:44
  • Which version of foundation are you using? The property may be called something else. – Yass Jan 25 '16 at 19:45
  • Using Foundation 6. I noticed in the docs it says "Magellan.reflow" I tried $(document).foundation.reflow; -- didn't get an error but doesn't seem to work. – mcriecken Jan 25 '16 at 19:50
  • How about just using `$(document).foundation()`? – Yass Jan 25 '16 at 19:53
  • That throws several warnings about trying to initialize elements that already have a foundation plugin. – mcriecken Jan 25 '16 at 20:03
  • I'm not familiar with Foundation 6 and I assumed `$(document).foundation()` would work. – Yass Jan 25 '16 at 20:15
  • Hmm, I'll keep digging around and update if I figure it out. Thanks anyway! – mcriecken Jan 25 '16 at 20:17
  • @Yass - Just wanted to let you know I solved this using the posted answer below. Thanks again for taking a look at this! – mcriecken Mar 30 '16 at 18:13
  • Good to hear and no probs – Yass Mar 30 '16 at 18:14

1 Answers1

2

I ended up solving this issue using the following code anytime an element was added to my page:

$(".sticky").foundation("_calc", true);

This recalculates all scrolling points for all sticky elements in your page.

Via comments here

mcriecken
  • 3,217
  • 2
  • 20
  • 23
  • Any idea why foundation would say "We're sorry, '_calc' is not an available method for this element"? http://stackoverflow.com/questions/36409146/foundation-6-sticky-calc-is-not-an-available-method-for-this-element – Chris Marisic Apr 04 '16 at 17:34