Position fixe mais qui évolue aussi...

Bonjour à tous

Je suis en train de monter un site en faisant bien attention à utiliser les bons codes pour les bonnes actions.
J'ai donc une interrogation sur du code CSS. EN fait je voudrais réaliser la même chose que l'on voit sur cette page, concernant le bloc orange à gauche "was this helpful".

En bref, un bloc qui reste fixe à 20px en margin-top mais qui au départ se trouve bien plus bas. Cette marge de 20px ne s'établit que lorsque l'on défile la page vers le bas. En allant sur la page vous devriez voir l'action vous même.

Merci beaucoup d'avance pour vos conseils.

Miran

Bonjour,

Tu as par exemple : StickyScroll, il y a moyen d'en trouver pleins d'autres...

bonjour yordi et merci pour ta réponse

je suis allé sur ton lien et le développeur explique que sa solution ne marche pas terrible sur chrome et firefox... (

Avais-tu d'autres solutions?

salut,
cette technique utilise du JS et elle est relativement simple.

<div id="Mon_ID"></div>

html, body {margin:0;height:2000px;}
div {width:200px;height:100px;margin:420px 0 0 20px;background:#49A3BC;}
div.fixe {position:fixed;top:20px;margin-top:0;}

function addEvent(a,b,c,d){d = d || !0;a.addEventListener?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var elementID = document.getElementById("Mon_ID");

addEvent(window, "scroll", function(){
	var curScll = document.documentElement.scrollTop || document.body.scrollTop;
	elementID.className = (curScll > 400) ? "fixe" : "";
});

Merci beaucoup pour ces informations détaillées Zelalsan!

Je suis sur le système Joomla! avec un thème de chez yootheme que je personnalise.

Je ne sais pas comment intégrer le côté script de fonctionnement. As tu une idée?

Merci d'avance

Miran