フッターや、ヘッダーは通常の高さでスクロールし、コンテンツの一部のみをフルスクリーンスクロールにしたく、現在fullPage.jsのプラグインで実装しようとしているのですが、なかなかうまくいきません。
http://alvarotrigo.com/fullPage/
簡単なコードですが、下記のような形になっています。
やりたいのはヘッダーからコンテンツ2まで通常にスクロール→フルスクリーンスクロールコンテンツ→コンテンツ3からは通常にスクロールの形です。
html
1<header>ヘッダー</header> 2<div>コンテンツ1</div> 3<div>コンテンツ2</div> 4<div class="fullPage"> 5<section>フルスクリーンスクロールコンテンツ<section> 6<section>フルスクリーンスクロールコンテンツ<section> 7<section>フルスクリーンスクロールコンテンツ<section> 8<section>フルスクリーンスクロールコンテンツ<section> 9</div> 10<div>コンテンツ3</div> 11<footer>フッター</footer>
js
1$(document).ready(function() { 2 $('#fullpage').fullpage(); 3});
最初からbodyにoverflow: hidden;height: 100%;がかかってしまい、スクロールできなくなってしまします。
jsがあまり詳しくないので、このような形状にできるおすすめのプラグインなどありますでしょうか。
fullPage.jsで実装可能なら、カスタマイズする方法を教えて頂けますと、幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。