Using multiscroll.js. Want to invert arrow after reaching end of slide

Question

I am using multiscroll.js in my page. See below.

$('#myContainer').multiscroll({
    sectionsColor: ['#116a9e'],
    anchors: ['welcome', 'second', 'third'],
    menu: '#menu',
    navigation: true,
    navigationTooltips: ['1', '2', '3'],
    loopBottom: true,
    loopTop: true
});

And I have arrow points down and I want if I reach the end of my page that arrow has to point up. But I'm not able to use below this.

document.addEventListener('scroll', onScroll);
function onScroll(){
console.log("Hello");
$('.arrow-scroll').toggleClass('scroll-down scroll-up')
}

This code never gets called. If I 'click' in place of 'scroll' everything works fine.

It looks like this has been answered already here: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom — RiaanP, Dec 08 '14 at 13:54
$(document).ready(function() { $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { console.log("ddddd"); } }); document.addEventListener('scroll', onScroll); }); I used like this. I does not work for me — Ijaz, Dec 08 '14 at 14:03

score 1 · Accepted Answer · answered Dec 08 '14 at 15:43

multiScroll.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Therefore your scroll event won't even be fired. The site has no scroll.

You should be using the callback afterLoad and adding your code there.

Something like:

$('#myContainer').multiscroll({
    sectionsColor: ['#116a9e'],
    anchors: ['welcome', 'second', 'third'],
    menu: '#menu',
    navigation: true,
    navigationTooltips: ['1', '2', '3'],
    loopBottom: true,
    loopTop: true,

    afterLoad: function(anchorLink, index){

        //supposing you have 4 sections on your site
        //this will fire when you reach the last one
        if(index == 4){
             $('.arrow-scroll').toggleClass('scroll-down scroll-up');
        }
    }
});

Using multiscroll.js. Want to invert arrow after reaching end of slide

1 Answers1