Menu icon Foundation
Magellan 5.0.3

After upgrading to Foundation 5.0.3, I noticed my content starting jumping vertically on the screen on scroll. I noticed it was changes to Magellan adding empty DIV elements with height. I assume this is used to equalize differences between the height of the magellan element and the scroll. However, this is kinda unfortunate for those who are using Magellan on an element that is set to absolute position by default. Surely this was not a well-considered fix? :/

**#image 1:** See the absolute positioned navigation on the right?

Screen shot 2014 01 26 at 0.14.32

**#image 2:** Start scrolling, nav gets fixed with Magellan, but woops ... Someone dropped in a few empty div tags inside my content :(

Screen shot 2014 01 26 at 0.19.39

This is the html that gets added:

<div class="image-navi-right fixed" data-magellan-expedition="fixed" style="position: fixed; top: 0px;">...</div>
<div style="height: 134px; display: block;"></div>

I fixed it with this CSS hack :/

[data-magellan-expedition="fixed"] + div {
    display: none !important;
}

Furthermore, there seems to be some bugs with the added div elements when there are multiple magellan elements on the page ...

Magellan

After upgrading to Foundation 5.0.3, I noticed my content starting jumping vertically on the screen on scroll. I noticed it was changes to Magellan adding empty DIV elements with height. I assume this is used to equalize differences between the height of the magellan element and the scroll. However, this is kinda unfortunate for those who are using Magellan on an element that is set to absolute position by default. Surely this was not a well-considered fix? :/

**#image 1:** See the absolute positioned navigation on the right?

Screen shot 2014 01 26 at 0.14.32

**#image 2:** Start scrolling, nav gets fixed with Magellan, but woops ... Someone dropped in a few empty div tags inside my content :(

Screen shot 2014 01 26 at 0.19.39

This is the html that gets added:

<div class="image-navi-right fixed" data-magellan-expedition="fixed" style="position: fixed; top: 0px;">...</div>
<div style="height: 134px; display: block;"></div>

I fixed it with this CSS hack :/

[data-magellan-expedition="fixed"] + div {
    display: none !important;
}

Furthermore, there seems to be some bugs with the added div elements when there are multiple magellan elements on the page ...

Rafi Benkual over 5 years ago

Upgrade to 5.1, we worked on magellan and added a threshold option as well. You can see that here: http://foundation.zurb.com/docs/javascript.html