2011-01-27 13 views
5

Ho del testo in fondo alla mia pagina che dice Costruito da me in esso. Ho questo in una posizione fissa a 35px lontano dal fondo e dalla sinistra della finestra in modo che si muova mentre si scorre. Quello che voglio veramente è di fissarlo verticalmente, quindi si muove mentre scorri verso l'alto e verso il basso ed è sempre a 35px dalla parte inferiore della finestra, ma è posizionato a 35px lontano dal bordo sinistro della pagina (non sullo schermo) in modo da non si muove quando si scorre orizzontalmente. Ho controllato questa soluzione Position element fixed vertically, absolute horizontally ma purtroppo non sembra funzionare per me. FYI Attualmente sto usando il seguente codice per risolvere il problema alto e in basso, che funziona bene (ma anche si muove quando si scorre orizzontalmente):Posso usare la posizione: fissa verticalmente e e posiziono: assoluta orizzontalmente?

#sticky { 
position: fixed; 
bottom: 35px; 
left: 35px; 
width: 206px; 
padding: 0; 
font-size: 0.6875em; 
} 

*html #sticky { 
position: absolute; 
bottom: 0px; 
} 

<div id="sticky"> 
Built by Me 
</div> 

Grazie mille per tutti i puntatori si potrebbe dare come non posso per il la vita di me risolve come risolverlo su un solo asse?

Dave

+0

Perché è codificato in PHP? –

+0

possibile duplicato di [Position element fixed vertical, absolute horizontal] (http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally) – kotekzot

risposta

4

Credo che l'unico modo per raggiungere questo obiettivo è quello di utilizzare position: fixed; e calcolare il valore di left al caricamento della pagina o ridimensionare individuando dove il bordo sinistro della "pagina" cade e 35px poi aggiungendo ad esso . Fammi sapere se vuoi che io elabori.

+0

Grazie mille per quello Scott, speravo lì era un altro modo, ma va tutto bene, ho usato $ (window) .scroll (function() {per realizzare questo. Ciò che è molto strano però è che non sembra funzionare se incremento la pos sinistra, comunque se io uso il seguente codice funziona perfettamente in tutti i browser, per interesse hai qualche idea del perché questo potrebbe essere così sicuramente questo è solo lasciandolo come era in origine? Grazie mille per il tuo aiuto deshg

+0

Questa è una bella domanda. Deve avere qualcosa a che fare con scroll, ma devo confessare che non sono esperto in jQuery come dovrei essere, quindi non posso dirlo con certezza. Sono contento di poter aiutare, però! –

+0

Nessun problema scott, grazie mille per il vostro aiuto! – deshg

19

Conservare il div fisso.

E avere il seguente codice javascript che si occuperà dello spostamento orizzontale.

$(window).scroll(function(){ 
    $('.fixed_div').css('left',-$(window).scrollLeft()); 
}); 
+1

+1 per semplicità a livello di copia/incolla – JSP64

+3

Si potrebbe voler attivare questo ridimensionamento della finestra, ad esempio '$ (finestra) .on (" ridimensiona scroll ", function() {...}' –

Problemi correlati