scroll event doesn't firing with fullPage.js

Question

I have added fullpage.js in my page and I am trying to add scroll event from JQuery but I dont know why I am not able to fire but when I remove the fullpage.js scroll event is firing.

HTML

<div class="container-fluid">
    <div id="fullpage">
        <div class="section " id="home">
            <div class="container-fluid">
                <div class="row homeDiv">
                    <div class="col-md-6 leftDiv animated animated fadeInRight"></div>
                    <div class="col-md-6 rightDiv animated animated fadeInLeft"></div>
                </div>
            </div>
        </div>
        <div class="section" id="features">Features</div>
        <div class="section" id="pricing">Pricing</div>
        <div class="section" id="contact">Contact</div>
    </div>
    <div id="footer">Footer</div>

JS

$(document).ready(function () {
    "use strict";
    /* init full page scroll */
    $('#fullpage').fullpage({
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
        /*Adding function to display the current nav-item using afterLoad Callback -> fullPage.js*/
        afterLoad: function (anchorLink, index) {
            var loadedSection = $(this);
            if (index == 1) {
                /* $('.selectedMenu').remove(); */
                $('#contactNav').removeClass('nav-itemActive');
                $('#featuresNav').removeClass('nav-itemActive');
                $('#pricingNav').removeClass('nav-itemActive');
                $('#homeNav').addClass('nav-itemActive');
                /* $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Home" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> "); */
            }
            if (index == 2) {
                /* $('.selectedMenu').remove();*/
                $('#contactNav').removeClass('nav-itemActive');
                $('#homeNav').removeClass('nav-itemActive');
                $('#pricingNav').removeClass('nav-itemActive');
                $('#featuresNav').addClass('nav-itemActive');
                /* $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Features" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");*/
            }
        }
    });
    /*click to reach anywhere in the page using #moveto callBack -> fullPage.js*/
    $(document).on('click', '#moveToHome', function () {
        $('.selectedMenu').remove();
        $.fn.fullpage.moveTo(1);
        $(".navbar-toggler").click();
    });
    $(document).on('click', '#moveToFeatures', function () {
        $('.selectedMenu').remove();
        $.fn.fullpage.moveTo(2);
        $(".navbar-toggler").click();
    });

    $(document).scroll(function () {
        alert("sdfj");
    });

});

Answer 1

By default, fullPage.js doesn't use JS scroll events but CSS3 transformations to scroll within sections and slides.

You can make use of the onLeave and afterLoad plugin callbacks. Like this.

Or you can init the plugin with this option:

scrollBar: true

...and you will be free to use custom JS scroll events.