Préambule

Dans ce tutoriel je vais vous montrer comment simplement fixer un élément sur votre page. Ce tutoriel fonctionnera aussi bien dans vos templates ForumActif que sur le web de manière générale.

En vérité, je vous mens un peu. Je vais vous montrer deux solutions :

• La première - Elle est toute facile, simplissime même. C'est une astuce CSS.


• La seconde - Elle est un peu plus complexe car il s'agit ici d'une solution Javascript. En revanche elle permettra à votre élément de suivre votre curseur, ce qui peut parfois se révéler utile. Mais ne vous inquiétez pas, je vous guide
  
  En avant !

Principe

Ce que nous allons essayer de réaliser ici, c'est de fixer une bonne fois pour toute un élément sur la page. C'est à dire que l'élément en question (une phrase, une image, un bloc, ...) restera à la même place sur votre écran même si vous descendez/remontez dans la page.

Pour ceux qui ne visualisent pas bien, voici un exemple de page où le header et le footer sont fixés sur la page.

Attention

L'astuce CSS que nous allons voir est normalement compatible avec tous les navigateurs... Tous ? Non ! Un navigateur résiste encore et toujours à l'envahisseur aux règles CSS de base. Il s'agit d'Internet Explorer dans sa version 6 et autres antérieures.

Techniquement, le code fonctionne sous une version supérieure ou égale à 7. Normalement (de nos jours), la majorité des utilisateurs d'IE tournent sur une version au moins aussi récente que la 7 donc il ne devrait pas y avoir trop de soucis.

Je vous donne cependant le code qui fonctionne sous IE6 en spoiler, au cas où....

Réalisation - HTML

Pour fixer un élément, il faut déjà le cibler. Pour cela, on crée généralement une div et on lui donne un id. Au final, c'est la base du CSS, on crée des blocs et on les façonne !

Voici donc le code HTML, à placer dans votre page ou le template de votre choix (ça, ça dépend de l'endroit où vous souhaitez fixer votre bloc).

Réalisation - CSS

Passons maintenant au CSS qui fixera le bloc que vous avez repéré par l'id "fixe". Il y a 3 choses à renseigner :

• position: fixed; : C'est le code qui va dire à votre navigateur de fixer l'élément sur la page


• top: Xpx; : Ce sera la position (ici en pixel) de votre bloc par rapport au haut de la page


• left: Xpx; : Ce sera la position (ici en pixel) de votre bloc par rapport au bord gauche de la page

Avec ça, vous êtes en mesure de fixer votre élément et de le positionner sur la page (ce qui est non négligeable).
Ensuite, vous pouvez le styliser comme bon vous semble bien entendu (et en faire un cadre avec du contenu).

Réalisation - Javascript

Si maintenant fixer un élément ne vous suffit pas, mais que vous souhaitez qu'il suive le curseur, il va vous falloir faire un peu de Javascript.

Le code que je vais vous présenter est simplement à rajouter par dessus l'étape 1. Il vous faudra placer l'ensemble du code dans le HTML, de préférence entre les balises head.

Enfin, il faudra également modifier la balise body telle que je vous la donne (afin que le code fonctionne dès le chargement de la page et ce, dès que la souris bouge).

Interprétation du code

Vous allez voir c'est pas si méchant
Il s'agit ni plus ni moins d'une fonction que j'ai appelé suivre(). Lorsqu'elle est déclenchée, elle change la position de l'élément dont l'id est "fixe" pour la positionner près du curseur. C'est pour cela que je la déclenche onMouseMove dans le body (en gros, dès que la souris bouge).

Voici l'explication du code pour ceux que ça intéresse :

• Première étape : On crée deux variables (x et y) qui représentent les coordonnées de la souris.


• Deuxième étape : On crée deux variables (ecartX et ecartY) pour pouvoir écarter plus ou moins le bloc du curseur comme on veut.


• Troisième étape : Enfin, on change la position de l'élément d'id "fixe" en changeant les variables top (axe y) et left (axe x).

Vous pouvez écarter plus ou moins le bloc en jouant sur les variables ecartX et ecartY du script. A vous de le faire comme bon vous semble !

Conclusion

Et bien voila, c'est tout ce que j'avais à vous apprendre ! Vous savez maintenant fixer un élément et vous avez un script pour que cet élément suivre votre curseur. Le script est assez simple, mais le rendu est fidèle à l'effet désiré (après on pourrait concevoir des scripts plus complexes pour un déplacement plus fluide... mais ce n'est pas le but de ce tutoriel ).

Si vous avez des questions, des remarques, des suggestions... n'hésitez surtout pas !