How to make scrollspy effect in foundation 4

Question

I have been playing with Foundation 4 for a while. I have to say it is very simple to use, and lots of its markups are very readable. The documentation is brief, but we can work around. Then I hit this really big problem. In Bootstrap, you will have a functionality called scrollspy. You fix a sidebar on left, and when you scroll through page, it tells your where you are. http://getbootstrap.com/javascript/#scrollspy

I notice Foundation 4 also has a js component called Magellan. Unfortunately, the documentation has been extremely vague about what it does and how to adjust it. I played it for a while and realize that I might not be able to achieve the same effect as Bootstrap's scrollspy, where I can have a fixed leftside panel. Magellan always pushes my panel to the top of my screen.

Does anyone have the experience working with magellan?

Answer 1

Take a loot at the scrollspy for jQuery page on github, read the info, might be helpful to use it separately on any project:

https://github.com/sxalexander/jquery-scrollspy

esp take a loot at where it says:

$(document).ready(function() {
        $('#sticky-navigation').scrollspy({
            min: $('#nav').offset().top,
            onEnter: function(element, position) {
                $("#nav").addClass('fixed');
            },
            onLeave: function(element, position) {
                $("#nav").removeClass('fixed');
            }
        });
    });