Affichez une box de suggestion d'article complémentaire avec jQuery

Voici un script bien pensé qui permettra d'afficher une petite box Javascript lorsque vous arrivez en bas de page de votre site. Idéal pour afficher des articles complémentaires et garder votre visiteur sur le site.

L'idée provient à l'origine du NY Times, et le concept a été réalisé en jQuery par le site tympanus.net.

Voici comment le mettre en place pas à pas:

On commence par le HTML et la box qui va s'afficher:

<div id="slidebox">
    <a class="close"></a>
    <p>More in Technology & Science (4 of 23 articles)</p>
    <h2>The Social Impact of Scientific Research and new Technologies</h2>
    <a class="more">Read More »</a>
</div>

Vous y mettez le contenu souhaité, l'article en complément de la lecture ...

Ensuite, nous allons personnaliser la box à l'aide d'un peu de CSS:

#slidebox{
    width:400px;
    height:100px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #E28409;
    position:fixed;
    bottom:0px;
    right:-430px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
}
#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;
}
a.more{
    cursor:pointer;
    color:#E28409;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h2{
    color:#E28409;
    font-size:18px;
    margin:10px 20px 10px 0px;
}
a.close{
    background:transparent url(../images/close.gif) no-repeat top left;
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
}
a.close:hover{
    background-position:0px -13px;
}

A vous de personnaliser la boîte pour votre site, mais voici au moins une bonne base de CSS.

Et enfin, on affiche ou cache la box avec du jQuery si le lecteur arrive en fin de page:

$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();

        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });

    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});

On utilise la fonction scroll pour déterminer où se trouve l'utilisateur, on effectue un calcul pour savoir ensuite si l'on affiche ou cache la box.

Vous pouvez bien évidemment changer l'animation de l'ouverture !

Sympa comme idée non ?

Démo

Site Officiel