Comment le plug-in jquery fullpage exploite l'en-tête et la queue

Cette fois, je vais vous présenter le plug-in jquery pleine page comment faire fonctionner la tête et la queue. Quelles sont les précautions pour que le plug-in jquery pleine page fasse fonctionner la tête. et la queue. Ce qui suit est un cas pratique.

Avant-propos

Une page est créée via le plug-in jquery-fullpage, et la page entière défile en plein écran. Cependant, nous souhaitons ajouter un copyright à la dernière page, qui ne fait qu'environ 100 px de haut, sans nécessiter un plein écran pour mettre le copyright. Comment faire ? Recherchez et j'ai trouvé différentes méthodes. Modifiez le code source, etc., ou écrivez votre propre code pour juger. Vertigineux. En fait, la solution officielle a été fournie.

Ci-dessous, parlons brièvement de la façon de l'implémenter

En fait, seule la partie html est nécessaire pour l'implémenter

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

Comme ci-dessus, je ne parlerai pas du code js. Tant que vous pourrez l'exécuter, il n'y aura aucun problème. Ici, il vous suffit d'ajouter une classe fp-auto-height à la tête et au bas.

C'est pas efficace ?

Hé, c'est parce que vous avez seulement cité le js, mais pas le css. Citez simplement le css suivant.

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

En fait, le code clé est comme suit

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

Résumé

Votre problème a peut-être déjà été rencontré par d'autres, et quelqu'un doit l'avoir résolu pour vous. Soyez simplement doué pour utiliser les moteurs de rechercheindex.

github pleine page

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Résumé des méthodes pour supprimer la détection de spécification de code dans vue

Vue.js+Flask crée un page unique Explication détaillée du cas APP (avec code)

Explication détaillée de l'implémentation Vue du didacticiel du composant de carrousel d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!