fadeOut / fadeIn div according to multiscroll active element

Question

I'm trying to fadeIn the .hello div when other than the first element is active and fadeOut when the first element is active.

Multiscroll.js add automatically the active class.

Any suggestions? Thanks.

https://jsfiddle.net/oadfcjt2/7/

<div class="hello">HELLO</div>

<div id="myContainer">

    <div class="ms-left">
        <div class="ms-section firstelement" id="left1">
             <h1>Left 1 </h1>
        </div>

        <div class="ms-section" id="left2">
            <h1>Left 2 </h1>
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section firstelement" id="right1">
            <h1>Right 1</h1>
        </div>

        <div class="ms-section" id="right2">
            <h1>Right 2</h1>
        </div>
    </div>

</div>

Answer 1

According to the docs, you could use afterLoad callback.
Start your hello div hidden in css:

.hello {
    ...
    display: none
}

and then with jQuery, fadeIn() or fadeOut() according to visible index (starting at 1):

$('#myContainer').multiscroll({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    menu: false,

    afterLoad: function(anchorLink, index) {
        if (index == 1)
            $('.hello').fadeOut('slow');
        else
            $('.hello').fadeIn('slow');
    }
});