SmoothState.js和FullPage.js不能很好地协同工作

Question

我现在花了大约 3 个小时，无法向正确的方向移动一英寸。

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

})

所以这就是问题所在。我在文档中看到了这条评论

帮助！我的 $(document).ready() 插件在刷新时工作正常，但在第二次页面加载时中断。 smoothState.js 提供了 onAfter 回调函数，允许您重新运行插件。如果您不熟悉 AJAX 的工作原理，这可能会很棘手。

我正是有这个问题，但是我在代码中添加了onAfter。我仍然得到

jquery.fullpage.js：1053 uncatch TypeError： 无法读取 undefined 的属性 'top' at isCompleteInViewPort (jquery.fullpage.js：1053) at scrollHandler (jquery.fullpage.js：967) 调度时 (jquery-3.2.1.js：5206) at elemData.handle (jquery-3.2.1.js：5014)

这对我来说没有任何意义。问题是由 Smoothstate 引起的，但整页上发生了错误.js当我将控制台日志放入整页功能时.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/。 目前只有伊斯坦布尔的咖啡馆连接可以运作。

非常感谢，如果你能帮助我。

Answer 1

$(...).整页不是一个函数

那是因为您根本没有导入整页.js。检查您的来源：http://artticfox.com/new_site/js/jquery.fullpage.js

另外，请确保使用最新的整页.js版本 2.9.4，如果您使用的是 SmotthState 的锚点，那么您应该在 fullPage 中使用lockAnchors:true.js这样它们就不会在其中产生任何影响。