Pause or stop fullpage without destroying

问题

I have a page with normal scrolling. There is an anchor on the page that pops open a modal in which I am initializing fullpage.js. This works fine so far, but when the user clicks a close icon, I want the modal window to close and for fullpage.js to pause or stop, so that the fullpage scrolling effect is disabled unless the user clicks the anchor again. I've tried using the destroy method to do this, but fullpage says that it can only be initialized once, so when the user clicks the anchor a second time fullpage does not reinitialize and this error is thrown: fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!

$('.js-show-modal').on('click', function() {
  var modal = $(this).attr('data-modal');
  $('.modal[data-modal="' + modal + '"]').show();
  $('#fullpage').fullpage({
    fixedElements: '.site-header',
    css3: true,
    navigation: true,
    navigationPosition: 'right'
  });
});

$('.js-close-modal').on('click', function(e) {
  e.preventDefault();
  $.fn.fullpage.destroy();
  $(this).closest('.modal').hide();
});

回答1:

Have you tried using $.fn.fullpage.destroy('all'); ? That's what you need to use in order to completely destroy fullPage.js. Otherwise only the events created by fullPage.js gets destroyed.

For info on the docs:

//destroying all Javascript events created by fullPage.js (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroying all Javascript events and any modification done by fullPage.js over your original HTML markup.
$.fn.fullpage.destroy('all');

来源：https://stackoverflow.com/questions/41858850/pause-or-stop-fullpage-without-destroying

标签

jquery

fullpage.js