CODEWITHSUNDEEP
javascriptjqueryscroll
Mario Sanchez Maselli
Mario Sanchez Maselli

Reputation: 1101

Scrollify direction (UP & DOWN)

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!

Upvotes: 4

Views: 1295

Answers (3)

Shawn W
Shawn W

Reputation: 566

For anyone like me who had an issue with all sections containing the active class after implementing Michaels solution, chain this to the addClass function... .siblings().removeClass('active');

Upvotes: 0

Ali Klein
Ali Klein

Reputation: 1908

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);
    }
});

Upvotes: 2

Michael Jason
Michael Jason

Reputation: 41

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');

      },

});

Upvotes: 4

Related Questions