jquery fullpage プラグインがヘッダーと末尾を操作する方法

今回は、jqueryfullpageプラグインがheadとtailを操作する方法と、jquery fullpageプラグインがheadとtailを操作する際の注意事項についてお届けします。 ここで実際のケースを見てみましょう。一見。

はじめに

ページは jquery-fullpage プラグインを通じて作成され、ページ全体が全画面スクロールします。ただし、著作権のために全画面を必要とせずに、高さわずか約 100 ピクセルの最後のページに著作権を追加したいと考えています。どうやってするの？ 検索すると色々な方法が見つかりました。ソースコードなどを修正するか、独自のコードを書いて判断してください。めまい。実際、公式のソリューションが提供されています。

それでは、実装方法について簡単に説明します

実際に実装に必要なのはHTML部分だけです

<p class="fullpage">
 <p class="section fp-auto-height">这里写头部</p>
 <p class="section">page1</p>
 <p class="section">page2</p>
 <p class="section">page3</p>
 <p class="section">page4</p>
 <p class="section fp-auto-height">这里写版权</p>
</p>

上記のように、実行できる限り、JSコードについては説明しません。問題ありません。ここでは、fp-auto-height クラスを頭と底に追加するだけです。

効果ないですか？

それは、次の CSS を引用しただけで、CSS を引用していないからです。

https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.css

実際、キーコードは次のとおりです

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
 height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
 height: auto !important;
}

概要

あなたの問題 この問題は以前に他の人が遭遇したことがあるかもしれませんし、誰かがあなたのために解決したはずです。検索

index エンジンの使い方を上手に使いましょう。

fullpage github

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue でコード仕様の検出を削除する方法のまとめ

Vue.js+Flask シングルページ APP ケースの構築の詳細な説明 (コード付き)

の詳細な説明画像カルーセルコンポーネントの Vue 実装チュートリアル

以上がjquery fullpage プラグインがヘッダーと末尾を操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。