2017-06-20 3 views
0

こんにちは、私はindex.htmlを作成し、タグを頭にこのコードを挿入し、すべての最初の、turbolinksfullpage.jsを使用しようとしています:Fullpage.jsと統合をturbolinks(フルページ正しく動作しません)

<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="turbolinks.js?body=1"></script> 
 
<script src="jquery.fullPage.min.js"></script> 
 
<script> 
 

 

 
$(document).on('turbolinks:load', function() { 
 
console.log("It works on each visit!") 
 

 
\t $('#fullpage').fullpage({ 
 
\t \t anchors: ['firstPage', 'secondPage', '3rdPage'], 
 
\t \t sectionsColor: ['#191919', '#191919', '#191919'], 
 
\t \t responsiveHeight: 600, 
 
\t \t navigation: true, 
 
\t \t \t \t \t \t \t  \t 
 
\t \t 
 
\t \t navigationPosition: 'right', \t 
 
\t \t afterResponsive: function(isResponsive){ 
 
\t \t } 
 
\t }); 
 
}); 
 
</head> 
 
<body> 
 
....my html code here .. 
 
</body>

また、私は2番目のページdemo_page.htmlを作成し、同じヘッドブロックをhtmlコードに挿入しました。 demo_page.htmlにはindex.html(Testing)に行くリンクがあります。リンクをクリックすると、index.htmlがturbolinksに読み込まれますが、フルページ機能はありません(コンソールログには、このフルページ以外のエラーはありません。一度初期化してから何度もやっています!)、F5ブラウザでindex.htmlをリフレッシュすると、スクロールセクションやFullpage.jsの他の機能が正常にロードされました。 この問題を解決するには、 fullpage.jsとturbolinksの統合のソーセージプロジェクト?

+0

これはすべて動的コンテンツに関するもので、fullPage.jsを破棄して初期化します。まず、ターボリンクが必要ですか? [このトピック](https://github.com/alvarotrigo/fullPage.js/issues/115)を確認してください。 – Alvaro

答えて

0

エラーとして、fullPage.jsを複数回初期化することはできません。

新しいコンテンツを含む新しいページを読み込むたびに、それを破棄して再度初期化してください。 詳細については、my answer hereを確認してください。 また、this topic in fullPage.js issues forumにチェックしてください。

関連する問題