moostrapScrollspy v1.0.4

This is a port of the Twitter Scrollspy to MooTools, released with help from Arian Stolwijk. It extends it further and makes it more flexible, allowing you to set the dependencies between trigger element and target element in whichever way you like, as well as provide an Event API that can help with scripting of effects on the trigger or on the target element.

You can also check this demo, running on the actual bootstrap fluid responsive markup - make sure you downsize your browser but not too much so the menu does not collapse.

Practical demo: Generated documentation navigation via doctor-md can be seen here:

http://dimitarchristoff.github.io/epik/



Details

Author
Dimitar Christoff
Current version
v1.0.4
GitHub
DimitarChristoff/mootstrap-scrollspy
Downloads
2922
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/Event
    • Core/Element
    • Core/Array
    • Core/Class

How to use

Read the source code for a full idea, it's self explanatory. Default use case works with no options at all.

```javascript

// defaults. use href with #targetid and matching element id="targetid"
new moostrapScrollspy('navmenu', {
    offset: 30  // makeup for the fixed nav bar at top
});

// define a custom element getter
new moostrapScrollspy('navbar3', {
    mask: 'a.main',  // on child links with class main only.
    navElementParse: function(el) {
        // match any div that contains a h2 with matching text
        var text = el.get('text').clean();
        var target = document.getElement("h2:contains('" + text + "') ! div");
        return target;
    },
    onActive: function(el) {
        // add a custom class to parent Element of link
        el.getParent().addClass('funky');
        // do something to element that comes into view...
        el.retrieve('navMonitor').tween('backgroundColor', ['#cccccc', '#ffffff']);
    },
    onInactive: function(el) {
        // undo custom class
        el.getParent().removeClass('funky');
    }
});

// code from backbone patterns example, adjusted for their dom
new moostrapScrollspy("toc", {
    onActive: function(el) {
        var parent = el.getParent("nav") || el.getParent("h2");
        parent.addClass("active");
    },
    onInactive: function(el) {
        var parent = el.getParent("nav") || el.getParent("h2");
        parent.removeClass("active");
    }
});

```



Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus