Html Garder Le Haut De La Page Visible
Ah, la navigation web... c'est un peu comme essayer de retrouver ses clés dans un sac à main géant. Parfois, tu trouves ce que tu cherches du premier coup, et parfois... ben, tu te perds dans un océan de tickets de caisse et de rouge à lèvres. Et si, en plus, ton sac à main décidait de se vider tout seul à chaque fois que tu essaies de chercher quelque chose ? C'est un peu l'effet d'une page web qui te fait remonter en haut à chaque fois que tu cliques sur un lien.
Le problème du "haut de page qui disparaît"
On l'a tous vécu. Tu es sur un site web, tu lis un article passionnant sur... disons... les bienfaits de la sieste pour la productivité (oui, oui, c'est un sujet important!). Tout est parfait, tu es absorbé, et soudain... BAM! Tu cliques sur un lien, et la page se recharge. Et là, horreur! Tu es tout en haut. Adieu, l'endroit précis où tu étais en train de lire. Bonjour, défilement infini pour retrouver ta place.
C'est un peu comme essayer de se souvenir du dernier épisode de ta série préférée après une coupure de courant. Tu sais que c'était avec l'acteur chevelu, mais lequel ? Et quelle était la scène déjà ? Frustration garantie!
Must Read
Comment garder ce fameux haut de page visible?
Heureusement, il existe des solutions pour éviter cette catastrophe web. Et non, il ne s'agit pas de coller son écran avec du scotch. (Bien que... tentant, parfois, avouons-le.)
L'idée principale est de rendre cette partie de la page "sticky". Imaginez un post-it que vous pouvez coller n'importe où sur votre frigo, et qui y reste, peu importe le nombre de fois où vous ouvrez et fermez la porte. C'est le même principe, mais pour le web!
Avec CSS, on peut faire des miracles. La propriété position: fixed; est votre amie. Elle permet de fixer un élément (comme un menu de navigation, par exemple) à une position précise dans la fenêtre du navigateur. Même si vous faites défiler la page, cet élément restera visible.
En gros, vous mettez votre menu ou n'importe quel element désiré dans un <header> (ou un <div> avec un ID) et dans votre fichier CSS vous ajouter:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100; /Important pour qu'il soit au dessus des autres éléments/
background-color: white; /ou n'importe quelle couleur/
}
C'est un peu comme mettre de la laque dans les cheveux de votre site web. Ça tient en place!
Attention: N'oubliez pas de donner une marge haute (padding-top ou margin-top) au reste de votre contenu, sinon votre haut de page fixe risque de masquer une partie importante du début de votre contenu. On ne voudrait pas que les premiers mots de votre article sur la sieste soient illisibles!
L'importance de l'expérience utilisateur
Garder le haut de la page visible, ce n'est pas juste un détail technique. C'est une question d'expérience utilisateur. Un site web facile à naviguer, c'est un site web où les visiteurs restent plus longtemps, explorent davantage, et... peut-être même achètent quelque chose. C'est un peu comme inviter des amis à manger chez soi. On veut qu'ils se sentent bien, à l'aise, et qu'ils aient envie de revenir (et d'apporter le dessert, soyons honnêtes).
Alors, la prochaine fois que vous développez un site web, pensez à ce pauvre utilisateur qui essaie de retrouver sa place dans votre article. Et offrez-lui un haut de page qui reste fidèlement à sa place. Il vous en remerciera!
