Lorsque vous naviguez sur les pages Facebook l'en-tête et pied de page fixe section restent visibles entre les charges de page et l'URL change dans la barre d'adresse en conséquence. Au moins, c'est l'illusion que je reçois.
Comment Facebook réaliser que techniquement parlant?
Une façon de fournir des en-têtes et pieds de page qui apparaissent invariant est via CSS - ici est un exemple d'un pied de page fixe (notez 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;
}
Vous voulez vous assurer que vous ajoutez une marge inférieure à vos divs page (ceux qui remplissent la partie principale de la page) pour laisser la place pour le pied de page fixe (même avec un en-tête en utilisant margin-top).
Cela ne pas rester en fait sur la page mais, parce que le positionnement est si serré et invariable, il apparaît comme si elle ne moins que votre page se charge trop long. Je ne sais pas si cela est ce que Facebook fait , mais il vous donnera le même effet.
Eh bien, la façon d'accomplir une telle chose serait par AJAX, mais aussi loin que je peux voir, facebook en fait ne le fait pas ... Je viens de vérifier, et il rafraîchit l'en-tête comme la plupart des sites ...
Edit: Quand je répondu, je cherchais à Facebook avec Google Chrome (2.0), qui pour une raison quelconque, ne fait pas vraiment de cette façon -> quand je clique sur mon profil de la page d' accueil, il me donne cette dans la barre d'adresse: http://www.facebook.com/profile.php?id=1304250071&ref=profile
et donc rafraichit la page entière ... Etrange
Reportez-vous à la réponse de Mark Brittingham pour savoir comment le style, bien que je ne pense pas que ce soit ce que vous demandez ici. Je vais vous donner les détails techniques sur la façon dont cela fonctionne (et pourquoi il est assez brillant).
Jetez un oeil à la barre d'état lorsque vous passez la souris sur le lien du profil dans l'en-tête ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
C'est là cette balise <a> est pointé. Maintenant, regardez la barre d'adresse lorsque vous cliquez dessus ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Notez le « # » identifiant / hachage fragment ? Cela prouve essentiellement que vous n'avez pas quitté la page et la demande précédente a été faite avec AJAX. Ils interceptent les événements de clic sur ces liens, et en remplaçant la fonctionnalité par défaut avec quelque chose de leur propre.
Pour ce faire avec Javascript, tout ce que vous avez à faire est assigner un gestionnaire d'événements de clic pour ces liens comme si ...
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;
}
}
L'un des avantages fabuleux à cette approche est qu'il permet le bouton de retour d'être fonctionnelle (avec une ruse peu ajoutée), qui a toujours été un effet secondaire douloureux d'utilisation chronique AJAX. Je ne suis pas 100% sûr de ce que cette supercherie est, mais je parie que c'est en quelque sorte capable de détecter lorsque le navigateur modifie l'identifiant de fragment (éventuellement en vérifiant chaque ~ 500 millisecondes).
Comme une note de côté, en changeant le hachage à une valeur qui ne peut être trouvée dans les DOM (via ID d'élément) fera défiler la page jusqu'au sommet. Pour voir ce dont je parle: vous faites défiler vers le bas environ 10 pixels de haut de Facebook, exposant la moitié du menu du haut. Cliquez sur l' un des éléments, il sautera de nouveau au sommet de la page, dès que l'identifiant de fragment est mis à jour (sans aucune fenêtre repeindre / redessiner retard).
Avec CSS positionnement absolu / fixe, les balises div contenant les en-têtes et pieds de page peuvent être partout dans le HTML. Comme au sommet!
Sur la plupart des navigateurs actuels il y a un retard rendu, l'un quart de seconde pour Firefox, je crois, de sorte que la page ne sera pas afficher le contenu partiellement rendu dans clignotements rapides et perdre beaucoup de temps à dessiner des données de réseau entre en jeu.
Donc, ce qui peut arriver est que la nouvelle page HTML contenant retourne rapidement les styles et en-tête et pied de page. Ce contenu peut être rendu immédiatement par le navigateur, alors quand il affiche la page suivante, il semble que les n'a pas changé.
Si la page génère du contenu dynamique, une bonne astuce consiste à mettre toutes les informations statiques en haut, sortie qui et vider la mémoire tampon de données. Ensuite, faites les requêtes de base de données dynamique et autres.
Pour augmenter Josh Stodola réponse: Si je comprends bien le YUI Bookmark Manager fait exactement ce travail.