Comment créer un pied de page collant en CSS uniquement
Normalement, nous avons besoin de JavaScript pour effectuer des effets de défilement liées à différentes actions des utilisateurs sur les pages Web. Le script fait le travail de suivi de la distance parcourue en haut ou en bas du défilement, et déclenche une action quand une hauteur seuil est atteinte.
Ce n'est pas particulièrement une mauvaise chose d'utiliser JavaScript pour les effets de défilement. En fait, il y a des cas plus compliqués qui sont impossible à résoudre sans JavaScript. Cependant il y a Hacks CSS qui peut remplacer ces scripts parfois.
Cet article va vous montrer how pour créer des effets de bas de page révélant des effets de page à l'aide de CSS. Nous allons utiliser deux cas d'utilisation pour illustrer ceci: un pour la page entière (voir la démo) et un pour des éléments de page individuels, tels que des articles.
Page entière
Nous devons créer un pied de page qui apparaît en dessous de la page pendant que l'utilisateur fait défiler l'écran. De plus, quand ils font défiler la page en arrière, le pied de page doit se cacher sous la page à nouveau.
Pour atteindre cet objectif, nous devons d’abord créer un pied de page avec position fixe au bas de l'écran.
1. Créer un pied de page fixe
Let's ajouter du contenu et un pied de page à la première page. J'utilise les balises HTML Dans ma démo, une image de chauve-souris est affichée à l'intérieur du pied de page pour un effet pas si effrayant, mais vous pouvez choisir n'importe quelle autre image de votre choix.. Lorem ipsum dolor sit amet… Passage en CSS, supprimer tout espace autour du Donner des dimensions ( Appliquer le Couleur les deux Met le De cette façon, il y aura assez d’espace en bas pour que le pied de page puisse Être visible quand l'utilisateur fait défiler la page. C'est tout. L'effet de révélation du pied de page pour une page Web complète est terminé. Découvrez la démo Codepen ci-dessous. Cette technique peut être utilisée pour un élément HTML individuel (avec un pied de page) qui assez long pour un effet de défilement de page approprié. La méthode est un peu compliquée, car elle ne fonctionne pas actuellement dans Chrome et IE, mais elle a un repli décent.. Commençons par créer un long article avec un pied de page. Pour promouvoir le code sémantique, j'ai choisi Lorem ipsum dolor sit amet… Ci-dessous, vous pouvez voir le style de base de l'article et du pied de page. Mon article ressemble actuellement à ceci. Bien sûr, vous pouvez également utiliser d'autres règles de style de base. Le pied de page précédent a été corrigé, celui-ci va être collant. Appliquer le le Vous pouvez ajuster sa valeur à votre goût, car elle détermine le point où le pied de page commence à apparaître ou à disparaître lorsque l'utilisateur fait défiler l'écran vers le haut ou vers le bas.. Donner la même valeur pour la marge inférieure de l'article, afin qu'il y ait assez d'espace en bas pour révéler le pied de page complet. Maintenant nous avons besoin une ouverture au bas de l'article à travers lequel on peut voir le pied de page collant défiler de haut en bas. Pour ce faire, remplacez le le Enfin, placez le pied de page derrière l'article en utilisant le Et voilà, l'élément de page individuel avec l'effet de révélation sur le défilement est terminé. Découvrez le stylo Codepen ci-dessous. Vous pouvez également trouver les deux cas d'utilisation sur notre page Github. et pour la sémantique. toutefois,
Continuez à faire défiler jusqu'à voir le pied de page
tag par réglage des marges à 0, et le faire assez longtemps par ajouter une hauteur personnalisée pour induire le défilement (si le contenu du corps de votre page est suffisamment long pour provoquer le défilement, vous n'avez pas à lui attribuer une hauteur).largeur et la taille) au pied de page, et fixer sa position au bas de l'écran avec le position: fixe; et en bas: 0; Propriétés. body font-family: Crimson Text; taille de police: 13 pts; marge: 0; footer width: 100%; hauteur: 200px; position: fixe; en bas: 0; couleur de fond: # DD5632;
2. Masquer le pied de page
z-index: -1 règle au pied de page afin de placez-le derrière tous les autres éléments sur la page. et balises blanches afin de couvrir le pied de page. body, html background-color: #fff; footer width: 100%; hauteur: 200px; position: fixe; en bas: 0; couleur de fond: # DD5632; z-index: -1;
3. Ajustez la marge inférieure
marge inférieure du étiquette égale à la hauteur du pied de page (dans mon exemple 200px). corps hauteur: 1000px; marge: 0; marge inférieure: 200 pixels;
Éléments de page individuels
1. Créer un long article
et .
Article 1
article width: 500px; couleur de fond: # FEF9F3; rembourrage: 20px 40px; article> footer height: 100px; couleur de fond: # FE0178; corps font-family: cormoran garamond;
2. Rendre le pied de page collant
position: collant règle au pied de page, de sorte qu'il se déplacera à l'intérieur des limites de l'article, mais toujours maintenir sa position sur l'écran pendant que l'utilisateur fait défiler de haut en bas. article> footer height: 100px; couleur de fond: # FE0178; position: -webkit-sticky; position: collante; en bas: 80px;
en bas: 80px règle fixe la position du pied de page 80px au-dessus du bas de l'article. article width: 500px; couleur de fond: # FEF9F3; rembourrage: 20px 40px; marge inférieure: 80px;
3. Ajouter un fond partiellement transparent
Couleur de fond de l'article avec un gradient linéaire image de fond, qui du haut de l’article jusqu’au sommet du pied de page est coloré avec la couleur de fond de l'article, et la partie restante vers le bas est rendu transparent. article width: 500px; rembourrage: 20px 40px; image d'arrière-plan: dégradé linéaire (jusqu'au bas, # FEF9F3 calc (100% - 120px), transparent 0); marge inférieure: 80px;
calc (100% -120px) Fonction CSS calcule la hauteur totale de l'article moins le pied de page. Dans mon exemple, c’est 120px (100px pour la hauteur). + 20px pour le rembourrage).
4. Placez le pied de page à l'arrière
z-index: -1 Règle CSS. article> footer height: 100px; couleur de fond: # FE0178; position: -webkit-sticky; position: collante; en bas: 80px; z-index: -1;
