Menu icon Foundation
Set scroll/fixed limit for Magellan

Is it possible to "unfix" a sticky Magellan element once it reaches a certain point on the page? e.g. : when a sticky sidebar reaches the footer of your page? I'm trying to prevent a sidebar from overlapping the footer.

Magellan

Is it possible to "unfix" a sticky Magellan element once it reaches a certain point on the page? e.g. : when a sticky sidebar reaches the footer of your page? I'm trying to prevent a sidebar from overlapping the footer.

Damon Golding over 5 years ago

Did you find a answer to this problem?

I'm struggling with it at the moment

Alex Kempton about 5 years ago

This would be very useful indeed!

John Moore over 4 years ago

Fiddle: http://jsfiddle.net/jomoweb/s5zzxfaj/2/

(Fiddle also includes some tweaks to remove vertical offset that made destination jump to bottom of expedition v.s. top)

I'm also having this issue. I took a shot at making a stop point for the expedition when the bottom hits the last destination point. Not sure if it will work with your markup, but you can try modifying your foundation.magellan.js with the code below. It's not overlapping anymore, but there is a little "blip" there when you keep scrolling. I will update this thread if I can solve that.

Replace line 114 (or wherever you find this):

expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');

With this:

var lastDestination = $("[data-magellan-destination]:last-child"); // Cache last destination (ld)
var ldBottom = lastDestination.offset().top + lastDestination.height(); // Calculate offset bottom of ld
var ldBottomYPosition = (ldBottom-window_top_offset); // Calculate ld bottom position

// If expedition bottom passes ld bottom
if(ldBottomYPosition <= (expedition.height() - settings.destination_threshold)) {
  // Position expedition top so bottom lines up with last destination
  // For different behavior, replace next line with your code
  expedition.css({position:'fixed', top: ldBottomYPosition - expedition.height(), minWidth: 0, width: expedition.outerWidth() + 'px'});
} else {
  // Magellan as .side-nav width fix: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar
  expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});
}