Wenn Sie durch die Seiten Facebook gerade bleiben die Kopf- und Fußzeile fester Abschnitt sichtbar zwischen Seite Lasten und der URL in den entsprechenden Änderungen Adressleiste. Zumindest ist das die Illusion ich.
Wie erreicht Facebook, dass technisch gesehen?
Eine Möglichkeit, Kopf- und Fußzeilen zu schaffen, die unveränderlich erscheinen soll über CSS - hier ist ein Beispiel für eine feste Fußzeile (man beachte die „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;
}
Sie wollen sicherstellen, dass Sie einig Margin-Bottom zu Ihrer Seite divs hinzufügen (jene, die den Hauptteil der Seite füllen) Raum für die feste Fußzeile (gleiche mit einem Header mit Margin-Top) zu verlassen.
Dies gilt nicht bleibt eigentlich auf der Seite aber, da die Positionierung so fest und unveränderlich ist, wird es scheinen , als ob es funktioniert , wenn Ihre Seite geladen wird zu lange dauern. Ich weiß nicht , ob dies ist , was Facebook tut , aber es wird Ihnen viel die gleiche Wirkung.
Nun, die Art und Weise zu erreichen, so etwas würde durch AJAX, aber soweit ich sehen kann, Facebook in der Tat ist dies nicht tun ... Ich frischt gerade überprüft, und es die Header wie die meisten Websites ...
Edit: Als ich das erste dieser antwortete : Ich war auf der Suche auf Facebook mit Google Chrome (2,0), die aus irgendeinem Grund nicht wirklich es auf diese Weise tun -> wenn ich von der Homepage auf Profil klicken, gibt es mir diese in der Adressleiste: http://www.facebook.com/profile.php?id=1304250071&ref=profile
und deshalb erfrischt die ganze Seite ... Seltsam
Siehe Mark Brittingham Antwort dafür, wie es um Stil, obwohl ich glaube nicht, dass das, was Sie hier fragen. Ich gebe Ihnen die technischen Details darüber, wie es funktioniert (und warum es ziemlich brillant).
Werfen Sie einen Blick auf die Statusleiste, wenn Sie über den Link Profil im Header schweben ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Das ist, wo der Tag <a> wird darauf auf. Nun ein Blick auf die Adressleiste, wenn Sie darauf klicken ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Beachten Sie die „#“ Fragmentbezeichner / hash ? Dies beweist im Grunde , dass Sie die Seite nicht verlassen haben und die vorherige Anforderung wurde mit AJAX gemacht. Sie sind Abfangen der Click - Ereignisse auf diese Links und Überschreiben der Standardfunktionalität mit etwas von ihrer eigenen.
Um dies mit Javascript geschehen, alles, was Sie tun müssen, ist ein Click-Ereignishandler wie so auf diese Links zuzuweisen ...
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;
}
}
Ein fabelhafter Vorteil diesen Ansatz ist, dass es die Zurück-Taste ermöglicht funktional zu sein (mit wenig addierte Tricks), die seit jeher eine schmerzhafte Nebenwirkung von chronischer AJAX-Nutzung. Ich bin nicht 100% sicher, was dieser Trick ist, aber ich wette, es ist irgendwie in der Lage zu erkennen, wenn der Browser der Fragmentbezeichner modifiziert (möglicherweise durch sie alle ~ 500 Millisekunden überprüft).
Als Randnotiz, den Hash auf einen Wert ändert, der wird nicht innerhalb des DOM (über Element - ID) zu finden Blättern Sie in der Seite den ganzen Weg nach oben. Um zu sehen , was ich rede: Sie nach unten scrollen etwa 10 Pixel vom oberen Rande von Facebook, die Hälfte des oberen Menü auszusetzen. Klicken Sie auf eines der Elemente, wird es aufspringen zum Seitenanfang zurück, sobald das Fragment Identifier (ohne aktualisiert wird jedes Fenster repaint / neu gezeichnet Verzögerung).
Mit CSS absolut / fester Positionierung, die div-Tags der Kopf- und Fußzeilen enthalten, können im HTML überall sein. Wie an der Spitze!
Bei den meisten aktuellen Browsern gibt es eine Verzögerung machen, ein Viertel Sekunde für Firefox Ich glaube, so dass die Seite nicht teilweise wiedergegebenen Inhalt in schnell blinkt Anzeige und viel Zeit verschwenden Zeichnung als Netzwerkdaten in kommt.
So kann passieren, was ist, dass die neue Seite schnell HTML gibt die Stile und Kopf- und Fußzeilen enthält. Dieser Inhalt kann durch den Browser gerendert sofort, so dass, wenn es um die nächste Seite angezeigt wird, erscheint es, als ob jene nicht ändern.
Wenn die Seite, dynamische Inhalte generiert, ist ein guter Trick alle statischen Informationen an der Spitze zu setzen, Ausgang, und den Datenpuffer spülen. Dann machen Sie die dynamischen Datenbankabfragen und so.
Zu erweitern Josh Stodola ist in meinem Verständnis der: Antwort YUI Lesezeichen - Manager macht genau diesen Job.