Podczas przeglądania stron na Facebooku nagłówek i stopka sekcja stałe pozostają widoczne między ładowaniem stron oraz adres URL w pasku adresu zmienia się odpowiednio. Przynajmniej, że to złudzenie mam.
W jaki sposób Facebook osiągnąć że z technicznego punktu widzenia?
Jednym ze sposobów zapewnienia nagłówki i stopki, które pojawiają niezmienna jest za pomocą CSS - tutaj jest przykładem stałej stopce (zawiadomienie „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;
}
Będziemy chcieli, aby upewnić się, że dodać margin-bottom do div stronie (te, które wypełnić główną część strony), aby zostawić miejsce dla stałej stopce (tak samo z nagłówka przy użyciu margin-top).
To jest nie faktycznie zatrzymać się na stronie, ale dlatego, że pozycjonowanie jest tak ciasno i niezmienna, będzie to wyglądało tak, jakby to robi chyba twoi strona ładuje się zbyt długo. Nie wiem, czy to jest to, co robi FaceBook ale to daje dużo ten sam efekt.
Cóż, droga do osiągnięcia takiego byłoby poprzez AJAX, ale o ile widzę, Facebook w rzeczywistości nie ma to zrobić ... Ja tylko sprawdzone i odświeża nagłówek jak większość witryn ...
Edycja: Kiedy po raz pierwszy odpowiedział ten, szukałem na Facebook z Google Chrome (2.0), które z jakiegokolwiek powodu, w rzeczywistości nie robią to w ten sposób -> po kliknięciu na moim profilu na stronie głównej, to daje mi to w pasku adresu: http://www.facebook.com/profile.php?id=1304250071&ref=profile
a zatem odświeża całą stronę ... Dziwne
Patrz odpowiedź Mark Brittingham za jak to styl, chociaż nie sądzę, że to, o co prosicie tutaj. dam wam szczegóły techniczne na temat, jak to działa (i dlaczego jest to dość genialne).
Spójrz na pasku stanu po najechaniu na odnośnik Profil w nagłówku ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
To właśnie tam, że tag Ra jest wskazywany. Spójrzmy teraz na pasku adresu po kliknięciu go ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Zwróć uwagę na "#" identyfikator fragment / hash ? To dowodzi, że w zasadzie nie opuściły stronę i poprzedni wniosek został złożony z AJAX. Są one przechwytywanie zdarzeń kliknąć na te linki i przesłanianie funkcjonalność domyślnego coś własnego.
Aby tak się stało z Javascript, wszystko co musisz zrobić, to przypisać obsługi zdarzenia kliknięcia tych linków jak tak ...
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;
}
}
Jeden fantastyczny zaletą tego podejścia jest to, że umożliwia przycisk Wstecz, aby być funkcjonalne (z niewielkim dodatkiem oszustwa), która tradycyjnie była bolesna skutkiem ubocznym przewlekłej użycia AJAX. Nie jestem w 100% pewien, co to jest oszustwo, ale założę się, że to w jakiś sposób wykryć, gdy przeglądarka modyfikuje identyfikator fragmentu (ewentualnie poprzez sprawdzenie go co ~ 500 milisekund).
Na marginesie, zmieniającym wartość mieszania do wartości, których nie można znaleźć w DOM (za pośrednictwem elementu ID) będzie przewijać stronę aż do szczytu. Aby zobaczyć, co mówię: przewijanie w dół o 10 pikseli od górnej Facebooku, odsłaniając połowę górnego menu. Kliknij na jeden z elementów, będzie to skok z powrotem do góry strony najszybciej jak identyfikator fragment jest aktualizowany (bez jakiegokolwiek okna repaint / odrysowywanie opóźnienie).
Z CSS bezwzględne / ustalonej pozycjonowania, znaczniki div zawierające nagłówki i stopki mogą być w dowolnym miejscu w kodzie HTML. Jak na górze!
Na większości obecnych przeglądarek występuje opóźnienie render, jedną czwartą sekundy dla Firefoksa wierzę, tak, że strona nie wyświetli częściowo świadczonych zawartość szybkich błysków i tracić czasu na rysunku jako dane sieć wchodzi.
Więc co może się zdarzyć, że nowa strona szybko zwraca HTML zawierający style i nagłówek i stopkę. Ta zawartość może być świadczone bezpośrednio przez przeglądarkę, więc gdy wyświetla następną stronę, wydaje się, jakby te nie uległy zmianie.
Jeśli strona jest generowanie dynamicznych treści, dobry trick jest umieścić wszystkie informacje statyczne na górze, że wyjście i przepłukać bufor danych. Następnie należy wykonać dynamiczny zapytań do bazy danych i takie.
Aby powiększać Josh Stodola za odpowiedź: W moim wyrozumienia Menedżer zakładek YUI robi dokładnie to zadanie.