SmoothState.js und FullPage.js funktionieren nicht gut

Question

Ich verbrachte jetzt 3 Stunden und konnte mich keinen Zentimeter in die richtige Richtung bewegen.

Hier ist mein Javascript,

jQuery(document).ready(function($){ 

'use strict'; 
var $page = $('#fullpage'), 
    options = { 
     debug: true, 
     prefetch: true, 
     cacheLength: 2, 
     scroll: false, 
     onStart: { 
      duration: 250, // Duration of our animation 
      render: function ($container) { 
       // Add your CSS animation reversing class 
       $container.addClass('is-exiting'); 
       // Restart your animation 
       smoothState.restartCSSAnimations(); 
      } 
     }, 
     onReady: { 
      duration: 0, 
      render: function ($container, $newContent) { 
       // Remove your CSS animation reversing class 
       $container.removeClass('is-exiting'); 
       // Inject the new content 
       $container.html($newContent); 
      } 
     }, 
     onAfter: function() { 
      initMap(); 
      fullPage(); 
      logoAnim(); 

     } 
    }, 
smoothState = $page.smoothState(options).data('smoothState'); 


function fullPage() { 
    $('#fullpage').fullpage({ 
     autoScrolling: false, 
     fitToSection: false, 
     navigation: true, 
     navigationPosition: 'left', 
     showActiveTooltip: false 
    }); 
}; 

fullPage(); 
    function logoAnim() { 
    $(window).scroll(() => { 
     if(window.pageYOffset > 20){ 
      $('#logo').addClass('play'); 
     } else { 
      $('#logo').removeClass('play'); 
     } 
    }); 
}; 

logoAnim(); 

})

So, hier ist das Problem. Ich sah diesen Kommentar auf die Dokumentation

Help! My $(document).ready() plugins work fine when I refresh but break on the second page load. smoothState.js provides the onAfter callback function that allows you to re-run your plugins. This can be tricky if you're unfamiliar with how AJAX works.

Ich habe genau dieses Problem, aber ich habe die onAfter zum Code hinzugefügt. Ich bin noch immer

jquery.fullpage.js: 1053 Uncaught Typeerror: bei scroll (jquery.fullpage.js: Can not Eigenschaft 'top' undefinierter bei isCompletelyInViewPort (1053 jquery.fullpage.js): lesen 967) bei Versand (jquery-3.2.1.js: 5206) bei elemData.handle (jquery-3.2.1.js: 5014)

Das macht keinen Sinn für mich. Das Problem wird durch Smoothstate verursacht, aber der Fehler tritt bei Fullpage.js auf und wenn ich ein Konsolenprotokoll auf die Funktion von Fullpage.js setze, bekomme ich das Protokoll, aber auf der zweiten Seite funktioniert die Funktion wegen dieses Fehlers nicht.

EDIT: Ich habe es nur in meinem Hosting und ich bekomme es auch jetzt.

main.js:39 Uncaught TypeError: $(...).fullpage is not a function 
at fullPage (main.js:39) 
at Object.onAfter (main.js:30) 
at HTMLDivElement.<anonymous> (jquery.smoothState.min.js:9) 
at HTMLDivElement.e (jquery.min.js:3) 
at HTMLDivElement.dispatch (jquery.min.js:3) 
at HTMLDivElement.q.handle (jquery.min.js:3) 
at Object.trigger (jquery.min.js:4) 
at HTMLDivElement.<anonymous> (jquery.min.js:4) 
at Function.each (jquery.min.js:2) 
at r.fn.init.each (jquery.min.js:2) 

Sie können die Staging http://artticfox.com/new_site/ finden. Nur Istanbul Cafe Link ist im Moment funktional.

Vielen Dank, wenn Sie mir helfen können.

Answer 1

$(...).fullpage is not a function

Das liegt daran, dass Sie nicht ganzpage.js importieren. Überprüfen Sie Ihre Quelle: http://artticfox.com/new_site/js/jquery.fullpage.js

Stellen Sie außerdem sicher, dass die neueste Version 2.9.4 fullpage.js verwenden, und falls Sie Anker für SmotthState verwenden, dann sollten Sie die Verwendung lockAnchors:true in fullPage.js sein, damit sie nicht haben irgendein Effekt darin.