Wie das JQuery-Fullpage-Plug-in den Header und Tail verwaltet

Dieses Mal werde ich Ihnen das jquery Fullpage-Plug-in zeigen, wie man den Kopf und das Ende bedient und tail. Das Folgende ist ein praktischer Fall.

VorwortEine Seite wird über das jquery-fullpage-Plug-in erstellt und die gesamte Seite wird im Vollbildmodus gescrollt. Allerdings möchten wir auf der letzten Seite, die nur etwa 100 Pixel hoch ist, ein Copyright hinzufügen, ohne dass für das Copyright ein Vollbild erforderlich ist. Wie geht das?

Suche

und ich habe verschiedene Methoden gefunden. Ändern Sie den Quellcode usw. oder schreiben Sie Ihren eigenen Code zur Beurteilung. Schwindlig. Tatsächlich wurde die offizielle Lösung bereitgestellt.

Lassen Sie uns im Folgenden kurz darüber sprechen, wie es implementiert wird Tatsächlich ist nur der HTML-Teil erforderlich, um es zu implementieren

<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>

Wie oben werde ich nicht über den js-Code sprechen, solange Sie ihn ausführen können, wird es kein Problem geben. Hier müssen Sie nur oben und unten eine fp-auto-height-Klasse hinzufügen.

Ist es nicht effektiv? Hey, das liegt daran, dass Sie nur

das JS, aber nicht das CSS zitiert haben. Zitieren Sie einfach das folgende CSS.

https://

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

Tatsächlich ist der Schlüsselcode Genau wie folgt

.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;
}

Zusammenfassung

Ihr Problem ist möglicherweise schon anderen aufgefallen, und jemand muss es für Sie gelöst haben. Seien Sie einfach gut im Umgang mit Suchmaschinen.

Ganzseiten-Github

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung der Methoden zum Entfernen der Codespezifikationserkennung in Vue

Vue.js+Flask erstellt a Einzelseite Ausführliche Erläuterung des APP-Falls (mit Code)

Ausführliche Erläuterung der Vue-Implementierung des Bildkarussell-Komponenten-Tutorials

Das obige ist der detaillierte Inhalt vonWie das JQuery-Fullpage-Plug-in den Header und Tail verwaltet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!