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.

Answer 2

As commented by @CLMVL fullPage.js doesn't fire the scroll event by default.

You'll find the answer to your questions in the fullPage.js Frecuently Answered Questions . More specifically in the question jQuery scroll event doesn't work