<style type='text/css'>
#Box3 {
position: fixed;
top: 170px;
}
</style>
L'Équipe LMSOFT
Tutoriel:
Comment fixer un élément à l'écran
Le deuxième bout de code, tel que mentionné précédemment, sert à placer l'élément par rapport à la bordure gauche de la page:
Ce tutoriel explique comment fixer un élément sur la page pour qu'il soit toujours visible au même endroit même si on utilise les ascenseurs pour descendre plus bas dans le contenu. Cet technique peut être très pratique pour certains éléments comme un menu, une boite de nouvelles, des liens vers des médias sociaux, etc.
À titre d'exemple de cette technique, voir la petite boite en haut à gauche avec le bouton "Retour en haut" de la page actuelle. Si vous utilisez l'ascenseur pour descendre dans la page, cette boite sera toujours visible au même endroit.
Comment faire:
Cette technique demande l'ajout un peu de code dans un Élément Web. Le code est très simple mais il faut l'adapter légèrement pour y mettre le nom de l'élément que l'on veut fixer. Dans l'exemple qui figure sur cette page, nous avons fixé le box et son contenu (le bouton) est également automatiquement fixé car il est enfant au box. Le même principe s'applique pour les panneaux.
Alors pour réaliser cet effet on doit ajouter deux bouts de code. Le premier écrase le style CSS par défaut de l'élément pour le détacher de sa position normale et le rendre fixe par rapport à la fenêtre. Le code, lui, ne fixe que la position en Y. La position en X elle est modifiée dynamiquement via javascript dans le deuxième bout de code car dans le cas précis, on veut fixer l'élément par rapport à la bordure de la page et non à la bordure de la fenêtre.
<script>
$(window).resize(function() {
PositionnementBox();
});
$(document).ready(function() {
PositionnementBox();
});
function PositionnementBox() {
var box= $('#Box3');
var page= $('#Page');
var positionpage= page.offset();
box.css("left", positionpage.left + 10);
}
</script>
Notez que dans les deux bouts de code, il y a une référence au nom de l'élément à fixer ("Box3" dans l'exemple) alors modifiez le code pour que ce soit le bon élément qui soit déplacé. De plus, la dernière ligne du deuxième bout de code contient la valeur en X à ajouter à la bordure de la page.
N'hésitez pas à nous visiter sur le forum pour plus d'information!