Question

我在页面中添加了fullpage.js，我正在尝试从scroll添加JQuery个事件，但我不知道为什么我无法解雇但是当我删除fullpage.js时1}} scroll事件正在解雇。

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

默认情况下，fullPage.js不使用JS滚动事件，而是使用CSS3转换在部分和幻灯片中滚动。

您可以使用onLeave和afterLoad插件回调。与this一样。

或者您可以使用此选项初始化插件：

scrollBar: true

...您可以自由使用自定义JS滚动事件。

Answer 2

由@CLMVL评论，fullPage.js默认不会触发滚动事件。

您可以在fullPage.js Frecuently Answered Questions找到问题的答案。更具体地说，问题是jQuery scroll event doesn't work

滚动事件不会使用fullPage.js触发

2 个答案: