11548 sujets

JavaScript, DOM et API Web HTML5

Apparition d'une DIV en fonction de l'emplacement sur la page.

Bonjour à tous,

Voilà, j'aimerais que ma NAV (le soleil/lune au top de la page) soit apparente (comme quand elle est en hover) quand on au top du site et lors des premiers scrolls vers le bas la NAV redevienne à sa position originale mais j'ignore totalement comment faire.

http://imp3rium.free.fr/sandvikfest/

Merci d'avance si vous pouvez m'éclaircir. Si vous avez besoin des code n'hésitez pas. Smiley smile
Sinon, j'ai une autre solution. Il s'agit d'une boite qui suit le mouvement de la page mais reste toujours visible dans la fenêtre.

le css : 
body {
		background-color	: maroon;
		margin				: 10px 100px;
		position			: relative;
}

#fixed {
		position			: absolute;
		top					: 200px;
		right				: 10px;
		background-color	: lightyellow;
		border				: 5px double white;
		width				: 200px;
}

#bloc {
		background-color	: lightblue;
		border				: 5px double yellow;
		width				: 500px;
}


Le javascript :
function scrollIt()
{
	var XX = 200;
	var YY = 50;

	/*=================================================================*/
	/*  XX = position top d'origine de la boite. Exemple : XX = 200;   */
	/*  YY = position TOP par rapport à la page. Exemple : YY = 50;    */
	/*=================================================================*/

	var node = document.getElementById("fixed");

	if (document.all)
			var posit = (document.documentElement.scrollTop < (XX-YY)) ? XX : document.documentElement.scrollTop + YY;
	else	var posit = (window.pageYOffset                 < (XX-YY)) ? XX : window.pageYOffset                 + YY;

	node.style.top   = posit + "px";
	node.style.right =  10 + "px";
}

window.onscroll = scrollIt;


Et le html : 
<body>
	<div id="fixed">Ceci est une division qui est positionnée au départ, à 200px du haut de la page, suit l'ascenseur et se maintient à 50px du haut de la page, sans la quitter.
	</div>

	<div id="bloc">
		une ligne<br />
...
		une ligne<br />
	</div>
</body>
Sujet clos
Aller à