2017-05-11 57 views
0

我現在花了3個小時,無法向正確方向移動一英寸。SmoothState.js和FullPage.js在一起工作不好

這裏是我的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(); 

})

因此,這裏的問題。我看到這篇文檔的評論

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.

我正是這個問題,但我加了onAfter代碼。我仍然得到

jquery.fullpage.js:1053遺漏的類型錯誤:無法讀取性能在isCompletelyInViewPort(jquery.fullpage.js:1053)的不確定 '頂' 在的scrollHandler(jquery.fullpage.js:967 ) 在調度(jQuery的3.2.1.js:5206) 在elemData.handle(jQuery的3.2.1.js:5014)

這沒有任何意義,我。問題是由Smoothstate引起的,但在Fullpage.js上發生錯誤,並且當我將控制檯日誌添加到Fullpage.js的功能時,我獲得日誌,但在第二頁上函數由於此錯誤而不起作用。

編輯:我只是把它放在我的託管,我現在也得到這個。

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) 

您可以找到分期http://artticfox.com/new_site/。 只有伊斯坦布爾咖啡廳鏈接目前功能。

非常感謝,如果你能幫助我。

回答

0

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

這是因爲您根本沒有導入fullpage.js。檢查源:http://artticfox.com/new_site/js/jquery.fullpage.js

此外,確保使用最新版本fullpage.js 2.9.4並且如果你正在使用錨SmotthState,那麼你就應該在fullPage.js使用lockAnchors:true所以他們不會有它的任何影響。

+0

嗨@Alvaro,謝謝你。我做了你所說的改變,但由於某種原因,我的最初問題仍然存在。我仍然得到 「jquery.fullPage.js:1053遺漏的類型錯誤:無法讀取性能在isCompletelyInViewPort(jquery.fullPage.js:1053)的不確定 '頂' 在的scrollHandler(jquery.fullPage.js:967) 在調度(jquery.min.js:3) 在q.handle(jquery.min.js:3)「還有,我得到」全頁:Fullpage.js只能被初始化一次,你是多次做!」 –

+0

您在JS控制檯中有太多錯誤。你應該先解決這些問題。 – Alvaro

+0

我得到那麼多錯誤的原因是因爲當我轉動鼠標滾輪時它會引發這個錯誤。和IM在我的內容[email protected]的第二負載得到這個(jquery.fullpage.extensions.min.js + jquery.fullpage.min.js):19整頁:Fullpage.js只能使用一次初始化你正在做多次!我在託管newsite.artticfox.com中設置了一個新的分段 –