Skrollr is an awesome plugin, plenty of options, but I can't really understand if there's some method for passing a function when the scroll position is after the last keyframe. For example, take a look at this fiddle.

When you scroll the top 100 pixels, the scrollable-between class changes in scrollable-after. In a similar way I'd like to pass a function (ex: when the scroll position is after the last keyframe do stuff).

How would you achieve that?

Skrollr is an awesome plugin, plenty of options, but I can't really understand if there's some method for passing a function when the scroll position is after the last keyframe. For example, take a look at this fiddle.

When you scroll the top 100 pixels, the scrollable-between class changes in scrollable-after. In a similar way I'd like to pass a function (ex: when the scroll position is after the last keyframe do stuff).

How would you achieve that?

• javascript
• jquery
• skrollr

1 Answer 1

You'll want to use the render option. Something like the following:

var box = $('#box'),
    boxDone = false;
skrollr.init({
    forceHeight: false,
    smoothScrolling: false,
    render: function() {
        if ( box.hasClass('skrollable-after') ) {
            if ( ! boxDone ) {
                boxDone = true;
               // do stuff
            }
        } else if ( boxDone ) {
            boxDone = false;
        }
    }
});

You don't necessarily have to have the boxDone variable, but it keeps it from running multiple times when that happens. You could also make it only happen once by not reseting that variable.

FIDDLE

I should probably also mention that you'll want make sure that whatever you do in there should run really fast or you run the risk of slowing down how smoothly everything moves. You might be able to get around that by using setTimeout, but I haven't done any testing with that.