Mangiare Senza Glutine disponibile su App Store

Per altre informazioni scrivi a fabriziocaldarelli@negusweb.it

Div o Immagine collegata allo scrolling della pagina

Da Programmazione Software.

Per fare in modo che un div o un'immagine segua lo scroll della pagina, può essere utile il codice che segue.

E' fondamentale notare due cose:

La prima è che il div deve avere una proprietà position impostata, ovvero:

<div id="divid" style="position:relative">

La seconda è che questo script dà per scontato che la posizione y assoluta del div sia 180. Potete variare questo parametro agendo su

var dy = 180;

Di seguito il codice sorgente che non ha bisogno di ulteriori commenti vista la sua brevità:

<script language="javascript" type="text/javascript">
	var yPrecedenteScroll = 0;
	var direzione = 0;
	var dy = 180;
	window.onscroll = function()
	{
		(document.body.scrollTop>yPrecedenteScroll)?direzione=1:direzione=-1;
 
		if (document.body.scrollTop>dy)
		{
    		      document.getElementById("divid").style.top = document.body.scrollTop-dy;
		}
 
		yPrecedenteScroll = document.body.scrollTop;
	}
</script>
 
<div id="divid" style="position:relative"><img src="prova.jpg" /></div>