Posizione fissa di un elemento

Rendere fisso un elemento all'interno di una pagina emulando il comando position: fixed dei CSS tramite JavaScript

Dato che purtroppo il comando position: fixed nel CSS viene riconosciuto in modo corretto solo da alcuni browser, Firefox in primis, è necessario emulare questo comando tramite Javascript per ottenere lo stesso effetto anche con Internet Explorer ad esempio.

Vediamo subito qual'è il codice necessario:

function posiziona(id_elemento, top, left) {
  var elemento = document.getElementById(id_elemento);
  // Controllo se il browser è Internet Explorer
  var is_explorer = (navigator.userAgent.indexOf("MSIE")>=0) ? true : false;

  var posLeft = (is_explorer) ? document.documentElement.scrollLeft : pageXOffset
  var posTop = (is_explorer) ? document.documentElement.scrollTop : pageYOffset

  elemento.style.left = parseInt(posLeft) + top + "px";
  elemento.style.top = posTop + left + "px";
}
setInterval("posiziona('fixed', 10, 10)",100)

Questa funzione permette all'elemento "fixed" di restare posizionato in alto a sinistra con 10 pixel di distanza dal bordo della pagina.

Chiaramente è necessario che l'elemento "fixed" sia stato dichiarato nel CSS con position: absolute.

Possiamo vedere l'effetto realizzato in questo esempio dove per maggiore visibilità l'elemento "fixed" è stato messo in risalto graficamente usando i CSS.

Categorie