2009-10-10 22 views
25

Come si può visualizzare visivamente un DIV nella parte superiore della pagina mentre l'utente scorre verso il basso una pagina Web?Un DIV che rimane nella parte superiore mentre scorre una pagina Web

Un semplice framework Javascript sarebbe fantastico!

è per questo sito web: http://BiblePro.BibleOcean.com

+5

andare con la risposta di Kobi. Un framework javascript sarebbe come schiacciare una zanzara con una mitragliatrice. Il CSS è la strada giusta da percorrere. – Anthony

+0

Ho controllato il tuo sito web menzionato nella tua domanda e mi piace molto, hai fatto un ottimo lavoro con esso. – amaster

risposta

9

Qui go: http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

Ineterestingly, ho la stessa domanda, ma sto cercando di ricreare l'Apple Stor e barra laterale del carrello degli acquisti. Funziona in modo simile, tranne che scambia la classe CSS del div quando viene raggiunta una determinata posizione di scorrimento, quindi passa da assoluto a fisso. Qualcuno sa dove posso trovare questo, ho cercato ovunque un tutorial per replicare l'effetto.

+2

Stanno usando i CSS per impostare il carrello in modo assoluto nella parte superiore di quella colonna, e poiché il banner sulla colonna ("intestazione") è a altezza fissa, hanno javascript che dice di rendere fissa l'intera colonna se la finestra in alto è un punto specifico nell'altezza del documento. Se si utilizza il codice, si noterà che utilizzano qualcosa chiamato coerente per farlo funzionare. – Anthony

43

Se non si cura di IE6, è possibile utilizzare position: fixed:

div { 
    top: 0; 
    position: fixed 
} 

utilizzando jQuery, vedere questa domanda: What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?

+1

Come nota, 'top: 0;' imposta la distanza dalla parte superiore della finestra all'inizio del div a 0 (dato che px o em non sono noti, il browser non si cura). È ovvio, ma è bello sapere come funziona esattamente. – Isaac

+0

@Isaac Copper - Credo che un'unità non sia necessaria per '0' - dovrebbe essere cambiato, o sto bene? – Kobi

+3

@Kobi: non è necessario specificare unità per '0'. – RichieHindle

2

che è semplice, basta fare la prima posizione Div e funzionerà fisso es

Inizio div tag

<div style="position: fixed;background: #336699; width: 100%;"> 

essere al tag div estremità superiore

Problemi correlati