Comment créer un en-tête de site Web collant

Les en-têtes de site Web qui restent en place lorsqu'un utilisateur fait défiler sont devenus un élément de conception très populaire. Ils permettent à l'utilisateur d'accéder facilement à la navigation sans avoir à faire défiler vers le haut à chaque fois qu'il souhaite choisir une page ou une option différente.

Les éléments dotés de cette fonctionnalité sont souvent appelés "collants" car ils collent à l'utilisateur, restant visibles lorsqu'ils se déplacent sur le site Web. Lorsqu'un utilisateur arrive pour la première fois sur le site Web, les éléments seront dans leur position de départ, mais l'en-tête collant restera au même endroit.

Étant donné que la navigation est l'un des éléments les plus importants d'un site Web, cette approche contribue à rendre la navigation plus accessible. Avoir une navigation qui reste en place permet un flux facile pour l'utilisateur lorsqu'il se déplace dans le contenu du site Web, ce qui est extrêmement important.

Les éléments de navigation collants aident à créer un flux d'utilisateurs facile lorsque les gens se déplacent sur votre site Web.

Qu'est-ce qui le rend collant ?

Le positionnement fixe est un élément clé pour que la navigation reste en place. Cet élément à position fixe est positionné par rapport à la fenêtre d'affichage ou à la fenêtre du navigateur elle-même. Étant donné que la fenêtre d'affichage ne change pas lorsque le site défile, cet élément à position fixe restera au même endroit lorsque la page défile.

Remarque : N'essayez pas ceci sur votre site en ligne

N'oubliez pas : vous ne devez jamais modifier le code directement sur votre site en ligne pour vous assurer que rien ne se casse. Notre application gratuite de développement local, Local, vous aidera à configurer un environnement de test dans lequel vous pourrez suivre ce didacticiel en toute sécurité.

Comment pouvons-nous faire en sorte que la navigation reste au même endroit ?

Rendre la navigation collante ne pourrait pas être plus facile ; c'est juste fait avec le style CSS. Cela ressemble essentiellement à ceci :

 [css]

.navbar-fixed-top {

position : fixe ;

droite : 0 ;

gauche : 0 ;

indice z : 999 ;

}

[/cs]

Peu importe la longueur de votre page ou le nombre de fois que vous faites défiler vers le haut et vers le bas, la navigation sera "coincée" en haut de la page. Une classe appelée .navbar-fixed-top a été ajoutée à la navigation qui crée le placement pour la navigation. J'ai ajouté cette classe à la balise de navigation. La position est définie sur fixe et l'ajout d'un positionnement à gauche et à droite garantit que le placement est correct et occupe toute la largeur de la page.

Gardez à l'esprit que chaque fois que cette classe est appliquée, elle créera la position fixe de l'élément. Très probablement, cette classe ne sera appliquée qu'une seule fois, sinon il y aurait plusieurs éléments de page se comportant de la même manière au même endroit, créant un désordre confus.

Une autre considération importante est le z-index. Parce que nous voulons que la navigation soit toujours visible, nous devons nous assurer qu'elle ne soit pas recouverte par d'autres éléments. Lorsque nous faisons référence au z-index , nous parlons de la propriété CSS qui définit l'ordre de pile d'éléments spécifiques. Un élément avec un ordre de pile supérieur est toujours devant un autre élément avec un ordre de pile inférieur. Une valeur de 999 est un grand nombre, ce qui en fait une valeur sûre pour la navigation.

Ajuster le corps de la page

Parce que la navigation est maintenant à une position fixe, elle couvrira une partie du contenu en haut. Il existe une solution simple pour cela. L'ajout d'un rembourrage en haut du corps poussera la page vers le bas, de sorte que le contenu en haut ne sera pas couvert par l'en-tête lorsque l'utilisateur arrivera sur la page.
Vous pouvez ajouter un rembourrage au corps dans votre fichier CSS :

 [css]

corps {

rembourrage en haut : 75 px ;

}

[/cs]

Gardez à l'esprit que votre rembourrage peut être plus grand ou plus petit en fonction de l'épaisseur de l'en-tête fixe.

Rendre l'en-tête collant spongieux

Il est courant de trouver un en-tête qui devient plus mince lorsqu'un utilisateur défile au-delà d'un certain point, ce qui le rend spongieux. Lorsque la navigation diminue en taille, cela aide à donner à l'utilisateur plus d'espace pour voir le contenu principal du site Web. Ceci est particulièrement utile sur les petits appareils. Nous utiliserons une combinaison de CSS et de JavaScript pour y parvenir.

Navigation spongieuse avec le script AnimatedHeader

Pour ajouter un en-tête animé qui changera sa taille lors du défilement, il existe une excellente solution légère pour rendre la navigation spongieuse. Il s'appelle AnimatedHeader. Il a une licence MIT, il peut donc être utilisé pour des projets personnels ou commerciaux. Pour obtenir ces fichiers, consultez AnimatedHeader sur GitHub.

CSS de base pour la navigation

Examinons deux styles CSS importants. Le premier vous semble probablement familier, .navbar-fixed-top qui spécifie notre hauteur, largeur et position fixe pour la navigation collante. Ci-dessous, vous pouvez voir qu'il y a une autre classe ajoutée qui spécifie une hauteur de 75px. C'est la taille "écrasée".

 [css]

.navbar-fixed-top {
position : fixe ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
arrière-plan : #f6f6f6 ;
indice z : 999 ;
hauteur : 90px ;
débordement caché;
-transition webkit : hauteur 0,3 s ;
-moz-transition : hauteur 0,3 s ;
transition : hauteur 0,3s ;
}

.navbar-fixed-top.cbp-af-header-shrink {
hauteur : 75px ;
}

[/cs]

Pour modifier la taille, JavaScript est utilisé pour ajouter la classe .cpb-af-header-shrink . Jetons un coup d'œil à la partie du script qui rend cela possible :

 [javascript]

fonction scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( en-tête, 'cbp-af-header-shrink' );
}
autre {
classie.remove( en-tête, 'cbp-af-header-shrink' );
}
didScroll = faux;
}

[/javascript]

Juste un rappel, il y a plus dans le script, alors assurez-vous de télécharger le code source pour avoir tous les composants. Comme vous pouvez le voir, après qu'un utilisateur ait dépassé un certain point, la classe .cpb-af-header-shrink est ajoutée. Si l'utilisateur fait défiler la page vers le haut, cette classe est supprimée.

L'option de positionnement collant CSS

Il y a aussi une option qui peut être moins compliquée. En fonction de la prise en charge du navigateur pour lequel vous concevez, position: sticky; rend la création d'un en-tête collant très simple. La prise en charge du navigateur n'est pas terrible, mais elle n'est pas non plus entièrement mondiale. Lorsque vous avez déclaré sticky, des préfixes peuvent être utilisés. Consultez Puis-je utiliser pour plus de détails.

Une façon simple de décrire le positionnement collant est qu'il s'agit d'une combinaison de positionnement relatif et fixe. Je suppose que vous rencontrez un peu de positionnement collant. Nous parlons d'en-têtes ici, mais c'est également utile pour tout élément de l'interface utilisateur que vous souhaitez "coller" lorsque les utilisateurs défilent. Ils le voient se "bloquer" lorsque l'élément atteint une distance spécifique du bord de la fenêtre.

L'élément est traité comme étant positionné de manière relative jusqu'à ce qu'il atteigne un certain point, puis il est "fixe". Ce point est déclaré en utilisant CSS. Le "point" est essentiellement lorsque vous spécifiez haut, bas, gauche ou droite, comme vous le feriez avec un positionnement absolu. Vous devez spécifier que l'élément a quelque chose à "coller".

Position d'utilisation : Collant

C'est assez simple à utiliser. Quelques déclarations CSS et j'ai pu avoir un en-tête collant. Voici trois étapes simples :

1. Trouvez le style correct afin de pouvoir déclarer l'élément comme collant en utilisant position:sticky; (n'oubliez pas les préfixes de navigateur comme position: -webkit-sticky; ).
2. Choisissez le "bord collant" (en haut, à droite, en bas ou à gauche) auquel l'élément doit "coller".
3. Déclarez la distance du "bord collant", c'est-à-dire 10px pour un en-tête qui devient collant lorsqu'il est à 10px de la zone de défilement.

 [css]

.navbar-fixed-top {
  position : -webkit-sticky ;
  position : collante ;
  haut : 0 ;
}

[/cs] 

Je ne voulais pas d'espace entre l'en-tête collant et la fenêtre d'affichage, donc c'est 0 pixel du haut. Vous pouvez voir cet exemple sur Codepen.

Soyez conscient de ces situations de débordement collantes

Compatibilité de débordement

C'est génial, mais ce n'est pas parfait. Il y a certaines limites. Le débordement peut parfois être un peu imprévisible. Il est préférable de rester à l'écart de certains types de débordement sur un élément parent avec quelque chose qui nécessite position: sticky . Il peut y avoir des problèmes avec le débordement automatique, le défilement ou le masquage.

Prise en charge limitée du navigateur

La prise en charge du navigateur est limitée, donc l'utilisation de la règle supports pour détecter si le navigateur actuel prend en charge le positionnement permanent est une option. Cela ressemble à :

 [css]

@supports(position:sticky){
  .entête{
    position : -webkit-sticky ;
    position : collante ;
    haut : 0 ;
  }
}

[/cs]

Il est important de se demander si le positionnement collant est absolument nécessaire. Si c'est le cas, l'approche de positionnement fixe peut être utilisée. Si ce n'est pas absolument nécessaire, ou si la prise en charge du navigateur n'est pas un problème, l'approche collante est plus facile à mettre en œuvre.

Cela peut sembler complexe au premier abord, mais il n'y a aucune raison d'être coincé dans une ornière de navigation ; il est relativement simple de rendre votre navigation collante et spongieuse. Avec un positionnement fixe CSS simple, vous pouvez facilement créer un en-tête de site Web collant. Avec du JavaScript simple, la navigation fixe peut être améliorée en la réduisant à une hauteur réduite, ce qui donne aux utilisateurs plus d'espace pour afficher le contenu du site Web.

N'essayez pas ceci sur votre site en direct

Créez un en-tête de site Web collant pour vos sites hébergés par WP Engine sur Local ! Apprenez-en plus et téléchargez-le gratuitement ici!