CODEWITHSUNDEEP
javascriptfullpage.js
Sasha.Burger
Sasha.Burger

Reputation: 21

How to stop fullpage.js scroll when overlay open?

I am trying to stop full page.js scroll when overlay is open

This is the code required to stop scrolling, however, I am not familiar enough with JS to implement this

//disabling scrolling
fullpage_api.setAllowScrolling(false);

Does anyone have any suggestions?

<div class="menu">
  <a href="#" class="menu-link">
  <span class="hamburger-icon">
    <span class="hamburger-bar hamburger-bar-1"></span>
    <span class="hamburger-bar hamburger-bar-3"></span>
  </span>
  </a>
</div>

<div class="menu-overlay">
  <nav class="overlay-menu">
  </nav>
</div>


$(document).ready(function() {

$(".menu-link").click(function(event) {
  event.preventDefault();
$(".menu-overlay").toggleClass("open");
  $(".menu").toggleClass("open");
  });
});

Upvotes: 2

Views: 1924

Answers (1)

Neil VanLandingham
Neil VanLandingham

Reputation: 1086

If you are initializing fullpage.js with jQuery you can use $.fn.fullpage.setAllowScrolling(false).

If you are initializing with plain JS, you need to maintain a reference to the initialized instance. For example:

var fullpageapi = new fullpage('#fullpage', {
//options here
    autoScrolling:true,
});

Then you can use fullpageapi.setAllowScrolling(false); in any scope in which the fullpageapi variable is accessible.

Upvotes: 3

Related Questions