skrollr

//add a class http://stackoverflow.com/questions/24967864/skrollr-change-nav-class-when-scrolling-to-different-sections-of-site
<li class="home" 
      data-center-top="@class:home active" 
      data-center-bottom="@class:home active" 
      data-anchor-target="#one" 
      data-edge-strategy="reset">
    <a data-menu-top="0" href="#one">Home</a>
</li>

//add an event with jQuery
//If you are already using jQuery, then you can easily proxy the keyframes event from skrollr to the element
skrollr.init({
    keyframe: function(element, name, direction) {
        $(element).trigger(name, [direction]);
    }
});

//....later...


$('.some-stuff').on('data500', function(e, direction) {
    console.log(direction);
});

// add / remove class
//https://github.com/Prinzhorn/skrollr/issues/99
<div data-7700="height:0px; @addClass:MyNewClass" data-8700="height:1000px; @removeClass:MyNewClass" />

//https://github.com/Prinzhorn/skrollr/issues/99
calling a function:
<div data-7700="height:0px; @evalIn:myFunction1; @evalOut:myFunction2" data-8700="height:1000px; @evalInOut:myFunction3" />
//@evalIn:Function1; @evalOut:myFunction" 


//return a reset remet a la positon initial
//You're using data-edge-strategy="reset" telling skrollr to remove the class after end. And overscrolling results in a larger offset than the end of the page.
<div data-200-bottom="height: 300px" data-0-bottom="height: 600px" data-edge-strategy="reset"></div>

// change the custom attribute
One other option is to change a custom attribute - and add the proper selector in css.
For example:
<div class="blah" data-100="@myAttr: 0;" data-200="@myAttr: 1;" data-300="@myAttr: 1;" data-400="@myAttr: 0;" ></div>
and in CSS:
.blah[myAttr="1"]{
/* your style */
}


//add pseudo selector with js
// https://github.com/Prinzhorn/skrollr/issues/99
// Store your callback
var callbacks = {
    '0': function(){ 
        // Handle action for between 0 - 479
    },
    '479': function(){
        // Handle action for between 0 - 479
    },
    '480': function(){
        // Handle action for between 480 on
    }
};

// Handles scroll event function calls
var renderHandler = function( data ) {
    if (data.curTop === data.lastTop) {
        return;
    }

    var from = data.lastTop;
    var to = data.curTop;
    var toCall = [];

    if (data.curTop < data.lastTop) {
        from = data.curTop;
        to = data.lastTop;
    }

    for ( var hollaback in callbacks ) {
        if( !callbacks.hasOwnProperty(hollaback) ) {
            continue;
        }

        if (hollaback >= from && hollaback <= to) {
            var fn = callbacks[hollaback];
            if (data.direction === 'up') {
                toCall.push(fn);
            } else {
                fn();
            }
        }
    }

    if (data.direction === 'up') {
        toCall.reverse();
        var i = 0;
        var l = toCall.length;
        for (; i < l; i++) {
            toCall[i]();
        }
    }
};

// Init Skrollr
skrollr.init({
    render: renderHandler
});