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.