While using Foundation (https://foundation.zurb.com/) I came across the issue of using the Magellan stick navigation plugin (https://foundation.zurb.com/docs/components/magellan.html). For those not familiar, the plugin allows an element to stay on the screen no matter how far down you scroll. This is really nice for navigations and shopping carts. Unfortunately there is an issue with this plugin while using Foundation version 4.3.2. When this plugin is placed inside of a grid component, it breaks in a fairly humorous manner. When used outside of a grid component though, the plugin works as intended. This issue has been posted to Github (link) but was unfortunately closed without a real fix. While working on a client project I decided I could not work around this issue and set out to solve it. The following describes the solution and why the changes are needed.
The Solution to the Foundation Problem
The following additions were made to app.css:
[data-magellan-expedition], [data-magellan-expedition-clone] {
min-width: initial;
}
div[data-magellan-expedition="fixed"].fixed {
left: auto;
}
[data-magellan-expedition-clone] {
visibility: hidden;
}
So the Magellan plugin creates a “sticky” component through a trick. The item that makes use of Magellan gets cloned so there are actually two copies of it, one for when you view it when the component is actually in view, and another for use when the component is out of view and needs to be brought back in view. This is the root of the problem as the component with the data attribute data-magellan-expedition-clone is no longer contained within the grid. The component is added directly to the body losing the additional CSS styling applied to items within the grid.
So taking care of the CSS issues is only half the battle unfortunately. Even when the CSS is applied, the Magellan plugin won’t function as intended due to the fact that JavaScript is in control of everything. To deal with this we can add in additional JavaScript code to the page:
$(window).on('scroll.fndtn.magellan', function() {
var originalWidth = $('div[data-magellan-expedition-clone]').width();
$('div[data-magellan-expedition="fixed"]').width(originalWidth);
});
The biggest issue is that the JavaScript code is constantly trying to move the component when the user scrolls the page, which causes a browser repaint, which causes the size to reset since the component is not in the grid. To deal with this we must use jQuery to reset the width of the cloned element so that it matches the original width. Thankfully, the Magellan plugin provides a scroll event which makes it easy for us to hook into this change and adjust the width dynamically as needed.
Finally we can add in an additional config named fixed_top that allows us to create padding above our Magellan plugin item if needed by adding the following to our page:
$(document).foundation({
"magellan-expedition": {
fixed_top: 10
}
});