[jQuery] Posizionare DIV sempre al centro dello schermo

[miki92]

Buonasera,
ho la necessità di posizionare un DIV sempre al centro dello schermo anche in caso di scroll.

Il codice che attualmente uso è:

function PosizionaWin(){
$(document).ready(function(){
$("#bga").css("height",$("body").height()+100);
 $(window).resize(function(){
  $("#bgm").css({
   position:'absolute',left:($(window).width()-$("#bgm").outerWidth())/2,top:70/*($(window).height()-$("#bgm").outerHeight())/2*/
  });
 });
$(window).resize();
});
}

Che però mi posiziona il DIV a 70px dal top pagina, mentre se uso il codice originale:

function PosizionaWin(){
$(document).ready(function(){
$("#bga").css("height",$("body").height()+100);
 $(window).resize(function(){
  $("#bgm").css({
   position:'absolute',left:($(window).width()-$("#bgm").outerWidth())/2,top:($(window).height()-$("#bgm").outerHeight())/2
  });
 });
$(window).resize();
});
}

Mi posiziona il DIV a metà della pagina.

Per lo scroll invece uso questo:

$(document).ready(function(){
    $(window).scroll(function(){
        PosizionaWin();  
    })
})

Ora io ho bisogno che sia al centro dell'area che vedo e, se scrollo la pagina, il DIV deve essere sempre centrato.

Come devo risolvere?

[karl94]

Se ti serve che sia fermo rispetto alla viewport (che non scorra assieme al documento) devi usare il posizionamento fisso (position: fixed). Ad ogni modo, è possibile centrare il tutto senza scomodare JQuery, solamente con l'uso di CSS.

[miki92]

Si lo so. Uso CSS per fixare al centro dello schermo il mio DIV tuttavia in questo caso non conosco con precisione la dimensione (perchè varia) del DIV e quindi voglio utilizzare jQuery.

Il sito non è mobile, è un'applicazione facebook quindi non uso template responsive. Ho bisogno solamente che il DIV sia sempre al centro di ciò che vedo a prescindere dallo scroll.

[karl94]

Allora mi sfugge qualcosa, perché imposti un posizionamento assoluto nel tuo script?

[miki92]

E cosa dovrei usare? In locale funziona benissimo mentre su facebook tutto cambia :S

[karl94]

Beh, il posizionamento fisso come ti ho suggerito prima, no? In questo modo non devi stare a riposizionare il box quando si scorre la pagina.

[miki92]

Scusami ma proprio non ti seguo... non so se sarà la stanchezza o altro... ma ti riferisci alla position:absolute?

[karl94]

Esattamente, perché non position: fixed;? In questo modo non devi fare nulla quando avviene lo scorrimento.

[miki92]

Ho provato. Ma absolute, fixed o relative si comportano tutti allo stesso modo!

[karl94]

Allora credo sia necessario vedere la pagina in questione per capire cosa succede. Hai provato ad ispezionare l'elemento con gli strumenti di sviluppo messi a disposizione dal tuo browser?

[miki92]

Si. Ora sto leggendo su google diversi siti che parlano di questo problema il quale sembra essere legato a facebook tuttavia non riesco proprio ad uscirne!

[karl94]

Potrebbe essere una precauzione presa per contrastare cose come il clickjacking, ma potrei anche aver scritto una grande boiata.

[miki92]

Fixed positioning will only work if there actually is something to scroll – so you would have to set your canvas to a fixed height and not use FB.Canvas.setAutoGrow, because that would adapt the iframe height so that there would be no scrollbars at all.

Dal Facebook Developers Group.