Durante la navigazione attraverso le pagine di Facebook l'intestazione e piè di pagina fisso sezione rimangono visibili tra caricamento della pagina e l'URL nella barra degli indirizzi cambia di conseguenza. Almeno, questa è l'illusione che ottengo.
Come Facebook il raggiungimento di tale punto di vista tecnico?
Un modo per fornire le intestazioni e piè di pagina che appaiono invariante è tramite CSS - ecco un esempio di un piè di pagina fisso (notare la "position: fixed;"):
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
Ti consigliamo di fare in modo che si aggiunge un po 'margin-bottom ai tuoi div pagina (quelli che riempiono la parte principale della pagina) per lasciare spazio per il piè di pagina fissa (stesso con un colpo di testa utilizzando margin-top).
Ciò non è in realtà rimanere sulla pagina, ma, perché il posizionamento è così stretto e invariante, apparirà come se lo fa a meno che il caricamento della pagina richiedono troppo tempo. Non so se questo è quello che fa Facebook, ma vi darà più o meno lo stesso effetto.
Bene, il modo per realizzare una cosa del genere sarebbe attraverso AJAX, ma per quanto posso vedere, facebook, infatti, non fare questo ... Ho appena controllato, e rinfresca l'intestazione come la maggior parte dei siti ...
Edit: Quando ho risposto prima questo, stavo guardando Facebook con Google Chrome (2.0), che per qualsiasi ragione, in realtà non farlo in questo modo -> quando clicco sul mio profilo dalla homepage, mi dà questo nella barra degli indirizzi: http://www.facebook.com/profile.php?id=1304250071&ref=profile
e quindi aggiorna l'intera pagina ... Strano
Fare riferimento alla risposta di Marco Brittingham per come per lo stile, anche se non credo che sia quello che stai chiedendo qui. Io vi darò i dettagli tecnici su come funziona (e perché è abbastanza brillante).
Date un'occhiata alla barra di stato quando si posiziona il mouse sopra il link Profilo nell'intestazione ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
È qui che il tag <a> sia puntato. Ora guardate la barra degli indirizzi quando si fa clic ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Si noti il "#" identificatore di frammento / hash ? Questo dimostra in sostanza che non si è lasciato la pagina e la richiesta precedente è stato fatto con AJAX. Sono intercettare gli eventi click su questi link, e ignorando la funzionalità predefinita con qualcosa di proprio.
Per rendere questo accada con Javascript, tutto quello che dovete fare è assegnare un gestore di eventi click per quei link in questo modo ...
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}
}
Una favolosa vantaggio di questo approccio è che consente il pulsante Indietro per essere funzionale (con un piccolo stratagemma aggiunto), che è stato tradizionalmente un effetto collaterale doloroso uso cronico AJAX. Io non sono sicuro al 100% di ciò che questo inganno è, ma scommetto che è in qualche modo in grado di rilevare quando il browser modifica l'identificatore di frammento (possibilmente controllando che ogni ~ 500 millisecondi).
Come nota a margine, cambiando l'hash per un valore che non può essere trovato all'interno del DOM (via elemento ID) sarà scorrere la pagina fino alla cima. Per vedere che cosa sto parlando: si scorrere verso il basso di circa 10 pixel dalla parte superiore di Facebook, esponendo la metà del menu in alto. Fare clic su una delle voci, salterà indietro fino alla parte superiore della pagina, non appena l'identificatore di frammento viene aggiornato (senza alcuna finestra ridipingere / ridisegnare ritardo).
Con i CSS assoluto posizionamento / fisso, i tag div che contengono le intestazioni ei piè di pagina possono essere ovunque nel codice HTML. Come in alto!
Sulla maggior parte dei browser attuali v'è un ritardo di rendering, un quarto secondo per Firefox credo, in modo che la pagina non visualizzerà i contenuti parzialmente reso in rapidi flash e sprecare un sacco di tempo a disegnare come dati di rete entra in gioco.
Quindi, ciò che può accadere è che la nuova pagina ritorna rapidamente HTML contenente gli stili e intestazione e piè di pagina. Questo contenuto può essere reso immediatamente dal browser, in modo che quando si visualizza la pagina successiva, sembra come se quelli non cambiava.
Se la pagina genera contenuto dinamico, un buon trucco è quello di mettere tutte le informazioni statiche nella parte superiore, di uscita che e svuotare il buffer di dati. Poi fate la dinamica query di database e così via.
Per aumentare di Josh Stodola risposta: Nella mia comprensione del Direttore YUI Bookmark fa esattamente questo lavoro.