CODEWITHSUNDEEP
fullpage.js
Keith
Keith

Reputation: 26499

How to disable FullPage.js on specific sections?

I am using the excellent fullpage.js library to create a fullscreen site, however I would like to disable the fullpage.js scrolling after the user reaches the second section and allow the user to scroll from then on as normal. Can't seem to find any clues in the docs.

Upvotes: 1

Views: 2974

Answers (2)

Seyed Abbas Seyedi
Seyed Abbas Seyedi

Reputation: 416

please, use this callback method: afterLoad (origin, destination, direction)

afterLoad: function (origin, destination, direction) {
    var loadedSection = this;

    if (destination == 2) {
        alert("receive to Section 2");
    }
}


code snippet example:

$(document).ready(function () {
        $('#fullpage').fullpage({
            scrollingSpeed: 300,
            sectionsColor: ['red', 'green', 'blue'],

            afterLoad: function (origin, destination, direction) {
                var loadedSection = this;

                if (destination == 2) {
                    alert("receive to Section 2");
                }
            }
        });
    });
 .section {
            text-align: center;
            font-size: 36px;
            color: #fff;
        }
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>

<div id="fullpage">
        <div class="section">section 1</div>
        <div class="section">section 2</div>
        <div class="section">section 3</div>
</div>

Upvotes: 1

Alvaro
Alvaro

Reputation: 41595

You could make use the scrollOverflow option that simulates the normal scrolling within a section.

See this example.

Upvotes: 0

Related Questions