Blog astuces web et SEO

Avec jQuery: garder un bloc toujours visible lors du défilement de la page

On a souvent besoin de garder un bloc toujours visible même lorsqu’on défile la page pour inciter le visiteur à l’utiliser. Parfois un bloc publicitaire, un formulaire…etc

Voilà comment le faire en jQuery:

    var scrolladY;
    var windowY;

	$(document).ready(function(){
        scrolladY = $("#monbloc").offset().top;
        $(window).scroll(function () {
            if ($.browser.msie) {
                windowY = $(window).scrollTop();
            }
            else {
                windowY = $(window).attr("scrollY");
            }
            if (windowY > scrolladY) {
                var offset = windowY - scrolladY;
                $("#monbloc").css("margin-top", offset + 20);
            }
            else {
                $("#monbloc").css("margin-top", 0);
            }
        });
    });

Il suffit juste d’ajouter ce bout de code dans votre code source en remplaçant « #monbloc » par l’ID ou la Class de votre bloc.