L’aggiornamento a iOS 5 ha finalmente risolto un problema legato al position:fixed degli elementi web su dispositivi Apple. Fino alla versione 4, infatti, non era possibile avere una toolbar fissa a fondo pagina sfruttando solamente le proprietà CSS. Si poteva ovviare con qualche soluzione javascript (alcune legate a jQuery) ma non sempre era facile implementare il codice.
Nonostante sia uscito nella seconda metà del 2011, iOS 5 non è ancora così diffuso come ci si potrebbe aspettare e sono ancora molti i device su cui gira la versione 4.
A questo punto, per contribuire alla causa, ho cercato anch’io di risolvere la questione in maniera semplice. Ne è venuto fuori jQuery iFixedPos, un plugin che potete vedere in azione in questa demo [1]. Ovviamente siete pregati di andarci con versioni obsolete di Safari.
Il funzionamento è semplice: se il device che accede alla pagina è un iPod, un iPad o un iPhone con iOS inferiore al 5 allora il plugin entra in azione facendo sparire la barra al tocco dello schermo e facendola comparire successivamente, riposizionata a fondo pagina.
Dopo l’inclusione di jQuery (ovviamente), l’implementazione del codice prevede il richiamo al plugin e alla funzione:
L’unico parametro da settare è s_div, ovvero l’elemento da impostare con position:fixed.
Download
Il pacchetto .zip contiene tutti i file necessari. Per scaricare lo script cliccate sul link: Saibal jQuery iFixedPos [2]
3 Comments To "Posizionare un elemento “fixed” su iOS 4 con iFixedPos"
#1 Comment By Faberone On 13 Aprile 2012 @ 15:36
Ciao. Articolo molto interessante,complimenti.
Una domanda.. cosa dovrei modificare per allineare il div “toolbar” in alto anziche in basso?
#2 Comment By saibal On 13 Aprile 2012 @ 17:16
ciao,
basta modificare il css
#toolbar {bottom: 0;}
cambiando bottom con top
#3 Comment By Base On 16 Aprile 2012 @ 13:37
Ciao Saibail, io ho un problemino, la toolbar contiente dei link che fanno partire un ancor in jquery:
$(function() {
$(‘a’).bind(‘click’,function(event){
var $anchor = $(this);
$(‘html, body’).stop().animate({
scrollTop: $($anchor.attr(‘href’)).offset().top
}, 1500,’easeInOutExpo’, });
event.preventDefault();
});
});
Il tuo script mantiene la toolbar al suo posto ma se clicco su un link all’interno del div #toolbar non funziona, mi sapresti aiutare?