Position fixed qui bloque sur ie et android

Bonjour,

Voilà, je souhaitais mettre une div en position fixed après un scroll et j'ai trouvé ce code js sur le forum (lien du topic en question):

<script>
window.onload = function() {
var Position = document.getElementById("menu").offsetTop;
window.addEventListener("scroll", function() {
if(document.documentElement.scrollTop > Position || document.body.scrollTop > Position) {
document.getElementById("menu").style.position = "fixed";
document.getElementById("menu").style.top = "70px";
}
else {
document.getElementById("menu").style.position = "absolute"; }
}, false);
}
</script>

Ce code fonctionne très bien sous chrome firefox, safari (y compris ios), mais sous ie8, la div reste à sa position initiale malgré le scroll; et sous androïd, lors du scroll, l'élément remonte pour se fixer en haut de la page!

J'ai beau chercher, je ne trouve pas d'explication. Du coup, si quelqu'un a une idée, cela m'aiderait beaucoup, surtout que je ne maîtrise vraiment pas bien le js!
Modifié par delphthom (07 Jul 2013 - 19:03)

salut,
IE8 ne comprend pas addEventListener mais plutôpt attachEvent. La position fixe pourrait te causer quelques problèmes sur les tablettes et smartphones.
Un code qui serait plus adapté ressemblerait déjà à ça

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

addEvent(window, "load", function(){
	var position = document.getElementById("menu").offsetTop,
		curScroll = document.documentElement.scrollTop || document.body.scrollTop;

	addEvent(document, "scroll", function(){
		if (curScroll > Position) {
			document.getElementById("menu").style.position = "fixed";
			document.getElementById("menu").style.top = "70px";
		}else {
			document.getElementById("menu").style.position = "absolute"; 
		}
	}, false);
}, false);

Merci de t'être penché sur mon problème.
J'ai testé le code, mais cette fois, il ne fonctionne nul part (aucune réaction au scroll sur les différents navigateurs que j'ai testé).

Du coup, j'ai mis une condition pour androïd afin de ne pas prendre en compte le script et pour ie8, et bien... Tant pis! J'abandonne.

Autant pour moi j'ai écris trop rapidement sans me concentrer vraiment.

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

addEvent(window, "load", function(){
	addEvent(document, "scroll", function(){
		var position = document.getElementById("menu").offsetTop,
			curScroll = document.documentElement.scrollTop || document.body.scrollTop;

		if (curScroll > position) {
			document.getElementById("menu").style.position = "fixed";
			document.getElementById("menu").style.top = "70px";
		}else {
			document.getElementById("menu").style.position = "absolute"; 
		}
	}, false);
}, false);

Là ça devrait marcher

Encore merci pour le temps passé à élaborer un code compatible ie!
Mais décidément, internet explorer est très (trop) capricieux et le résultat est exactement le même qu'avec mon code initial.
De toutes façons, de moins en moins de gens utilisent ce navigateur et je commence à en avoir marre de passer mon temps libre (ainsi que le tien ) à trouver des codes spécialement pour ie. Je ne peux même pas tester ie9 ; j'espère que c'est mieux.
C'est dommage que ça ne marche pas, mais bon...

loll non c'est encore moi ! Décidément... je ne devrais pas toucher de code mes jours de repos .
Il faut juste changer "document" par "window" pour le addEvent "scroll".

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

addEvent(window, "load", function(){
	addEvent(window, "scroll", function(){
		var position = document.getElementById("menu").offsetTop,
			curScroll = document.documentElement.scrollTop || document.body.scrollTop;

		if (curScroll > position) {
			document.getElementById("menu").style.position = "fixed";
			document.getElementById("menu").style.top = "70px";
		}else {
			document.getElementById("menu").style.position = "absolute"; 
		}
	}, false);
}, false);

Tu ne devrais pas négliger IE8 et encore moins IE tout court.

YES ! Ça marche impeccable!

Merci beaucoup! T'as vaincu IE, bravo! Sincèrement, j'ai pas ta persévérance. Même si je m'étais résolue à abandonner, j'avoue que ça me fait vraiment plaisir que ça marche !
C'est vrai qu'IE reste important, mais y a des fois où...
Modifié par delphthom (08 Jul 2013 - 14:12)

Etant remotivée à bloc, j'ai fignolé le code et je vous en fait part car ça peut peut-être servir à d'autre, qui sait...

En effet, en remontant le scroll, sous IE (évidemment! ), l'élément se remettant bien en position absolute, mais se repositionnait dans le header et non dans son container d'origine. En somme, il se retrouvait à 70px du haut du header et non à 70px du haut de son container. Je ne sais pas si je suis très claire...

Bref, voilà le script, ce sera certainement plus explicite:

function addEvent(a,b,c,d){d = d || !0;a.addEventListener?a.addEventListener(b,c,d):a.attachEvent("on"+b,c);}
addEvent(window, "load", function(){
addEvent(window, "scroll", function(){
var position = document.getElementById("menu").offsetTop,
curScroll = document.documentElement.scrollTop || document.body.scrollTop,
isMSIE = /*@cc_on!@*/0;
if (curScroll > position) {
	document.getElementById("menu").style.position = "fixed";
	document.getElementById("menu").style.top = "70px";
}
else {
	if (isMSIE) {
		document.getElementById("menu").style.position = "absolute";
		document.getElementById("menu").style.marginTop = "165px"; //Hauteur du header.
	}
	else {
		document.getElementById("menu").style.position = "absolute";
	}
}
}, false);
}, false);

Modifié par delphthom (09 Jul 2013 - 16:03)