Menu icon Foundation
Magellan + Side-Nav, destination is off

I'm using Magellan with the side-nav to link to anchor points down a long page. The side-nav is in the left column, and the main page content is in the right column.

When you click on a link in the side nav, instead of bringing that section's heading/anchor to the top of the page as expected, it brings that heading/anchor to just below the point of the bottom of the side-nav - despite them being in different columns.

It seems Magellan thinks the links in the side-nav are across the top of the page and compensating for it's height. But since the links are in their own column, this compensation doesn't make sense. I can't figure out why this is happening or how to adjust (if possible). I've re-read the Magellan docs, but no luck.

Any ideas?

Magellan

I'm using Magellan with the side-nav to link to anchor points down a long page. The side-nav is in the left column, and the main page content is in the right column.

When you click on a link in the side nav, instead of bringing that section's heading/anchor to the top of the page as expected, it brings that heading/anchor to just below the point of the bottom of the side-nav - despite them being in different columns.

It seems Magellan thinks the links in the side-nav are across the top of the page and compensating for it's height. But since the links are in their own column, this compensation doesn't make sense. I can't figure out why this is happening or how to adjust (if possible). I've re-read the Magellan docs, but no luck.

Any ideas?

Eric Dumensil about 5 years ago

Hi,

I'm new to foundation and I would like to know how to set up your Magellan + Side-nav in your HTML?

Thanks

John Moore about 5 years ago

Gregr & Eric,

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

This fiddle contains a version of the altered magellan sidenav.

After more extensive testing, I found these 3 updates to foundation.magellan.js (version 5.4.7) made it possible.

  1. Disable the vertical offset, which was Gregr's problem, by removing "- expedition.outerHeight()" in 2 places

Line 47:
Javascript
// scroll_top = scroll_top - expedition.outerHeight();

Line 155:
Javascript
// var top_offset = Math.floor(dest.offset().top - settings.destination_threshold - expedition.outerHeight());
var top_offset = Math.floor(dest.offset().top - settings.destination_threshold);

  1. For a side nav, you will notice the nav will go full width when it becomes fixed. To keep it the width of the container.

Line 114:
Javascript
// expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});

(Credit: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar)

  1. The next issue I had was that the side-nav would overlap anything below the last destination when scrolling down the page. Here is the fix I made, but there is an annoying little blip as you will see in the fiddle. I still think it is better than the overlap at this point though.

Line 114: (Building on last update)
```Javascript

       // Adding expedition stop point so it can't overlap elements below last destination
      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'});
      }