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.
Catégorie: Développement frontend, Divers, Diverses Astuces, jQuery
Tags: jQuery.
3 commentaires
Ça fait une plombe que je voulais faire ça sur un de mes sites. Merci beaucoup pour le tuyaux.
Merci pour ce code Jquery. Je cherchais comment faire cela, mais je n’avais jamais réussi!
J’ajouterai juste :
(ligne 13) if (windowY > scrolladY-20) {
le -20permet d’éviter le rebond au début du scroll.