Scrollify direction (UP & DOWN)

Question

I'm using scrollify.js https://projects.lukehaas.me/scrollify/

I have everything working. But I have a pagination, that I was basically animating by adding an active class, depending on the page. But now the animation changed, and it depends on if you are scrolling from up to down or from down to up. So I will like to add a class of active.fromTop or active.fromDown. But I do not find anywhere in the documentation the option of knowing the direction on scroll.

$.scrollify({
     section: ".section-scroll",
     easing: "easeOutExpo",
     sectionName: false,
     scrollSpeed: 550,
     setHeights: false,
     offset: 0,
     before: function(e) {

        $('.pagination li').eq(e).addClass('active');

      },

});

Thanks for the help!

Answer 1

There is no such feature, try this

$.scrollify({
     section: ".section-scroll",
     easing: "easeOutExpo",
     sectionName: false,
     scrollSpeed: 550,
     setHeights: false,
     offset: 0,
     afterRender:function(){
                $('body').attr('data-preIndex',0);
                },
     before: function(e) {
                var direction,preIndex;
                preIndex = parseInt($('body').attr('data-preIndex'));
                if (e > preIndex){
                    direction = "down";
                    }else{
                    direction = "up";
            }

            $('body').attr('data-preIndex',e);

            console.log( direction );            

            $('.pagination li').eq(e).addClass('active');

      },

});

Answer 2

To add direction class to body, and little more concise:

$.scrollify({
    afterRender() {
        $('body').attr('data-pre-index', 0);
    },
    before(i) {
        const $body = $('body');
        let preIndex = parseInt($body.attr('data-pre-index'));
        let direction = i > preIndex ? 'down' : 'up';

        $body
            .attr('data-pre-index', i)
            .removeClass('up down')
            .addClass(direction);
    }
});