Menu icon Foundation
Magellan-expedition won't fire when inside div with overflow

Hello!

I'm using version 5.5.2 of Foundation and I'm having a problem with Magellan-Expedition. It seems that anytime I have the nav (with the arrivals) and content (with the destinations) inside of a div with overflow: auto, hidden, scroll, or anything other than the default, Magellan doesn't take effect.

I found that this person had the same problem: https://github.com/zurb/foundation-sites/issues/3980 as well as this person: http://foundation.zurb.com/forum/posts/2105-magellan-not-sticky (look near the end). Is there any way to create a div with overflow scroll where the scroll position of the div (and not body) determines whether or not the arrivals have reached their destination?

Here's a fiddle that works: https://jsfiddle.net/yom68byr/1/
And another with overflow that doesn't: https://jsfiddle.net/uzvLwvev/

the only difference is that one is wrapped in a div with overflow: auto. Is there any way to achieve this affect without having to customize the plugin? Thank you!

Magellanoverflow5.5.2containerexpeditionmagellan-expedition

Hello!

I'm using version 5.5.2 of Foundation and I'm having a problem with Magellan-Expedition. It seems that anytime I have the nav (with the arrivals) and content (with the destinations) inside of a div with overflow: auto, hidden, scroll, or anything other than the default, Magellan doesn't take effect.

I found that this person had the same problem: https://github.com/zurb/foundation-sites/issues/3980 as well as this person: http://foundation.zurb.com/forum/posts/2105-magellan-not-sticky (look near the end). Is there any way to create a div with overflow scroll where the scroll position of the div (and not body) determines whether or not the arrivals have reached their destination?

Here's a fiddle that works: https://jsfiddle.net/yom68byr/1/
And another with overflow that doesn't: https://jsfiddle.net/uzvLwvev/

the only difference is that one is wrapped in a div with overflow: auto. Is there any way to achieve this affect without having to customize the plugin? Thank you!

Rafi Benkual over 3 years ago

This makes sense. The short answer is no - making any fixed position element work well with and overflow: scroll container is problematic. There is a really good positioning library out there http://imakewebthings.com/waypoints/shortcuts/sticky-elements/ I hear they have it solved.