Fixed position

19 janvier 2014 nakama

Intégration

(Cet article a été écrit il y a très longtemps, dans une galaxie très très lointaine)

Je pense que vous avez déjà vu sur certain site, des éléments qui vous suivent pendant le scroll de la page (exemple ici avec la petite image à gauche pour remonter en haut du site).

On va voir que c’est assez simple :

On commence par le html

<a id="back-top" href="#top">Back To top</a>

Un lien simple ici, mais il est tout à fait possible de faire plus compliquer. Par exemple une div qui contiendrait les dernières news du site …

La css n’est pas plus compliquée

#back-top{
    background: url("arrow.png") no-repeat;
    height: 48px;
    width: 48px;
    top: 100px;
    display: block;
    overflow: hidden;
    position: absolute;
    text-indent: 230%;
    white-space: nowrap;
    word-wrap: normal;
}

On place notre élément là on souhaite l’afficher. Rien de plus facile.

Et maintenant place au script

// offset() Récupére les valeurs left et top de l'élément
// value c'est la valeur qui permet de placer correctement l'élément : dans notre cas top : 100px
var top    = $("#back-top"),
posElement = top.offset(),
value      = 100;

$(window).scroll(function(){
    if($(window).scrollTop() > posElement.top-value)
        top.css({'position':'fixed','top':value+'px'});
    else
        top.removeAttr('style');
});

Dès qu’on scroll, on fait appel à la fonction.
On teste si le scroll actuel est plus grand que la position de l’élément moins la valeur qui permet de le placer.

Si c’est bon : on ajoute la position fixed, ainsi que la valeur.

Pourquoi une valeur ? Elle doit être identique à la valeur utilisée en CSS (pour cet exemple : 100px). Comme cela, dès qu’on scroll et qu’on arrive à la position de notre élément moins la valeur, on entre dans la condition et de ce fait on conserve bien la position.

Si ce n’est pas bon : on supprime l’attribut style pour ainsi revenir à l’état par défaut.

Mots-clés associés à cet article :

Retrouvez d'autres articles par catégories