Při procházení stránek Facebooku záhlaví a zápatí pevnou část zůstanou viditelné mezi načítáním stránek a URL v adresním řádku se mění odpovídajícím způsobem. Alespoň, že je to iluze získám.
Jak se Facebook dosáhnout toho, aby z technického hlediska?
Jeden způsob, jak zajistit záhlaví a zápatí, které se objevují invariant je pomocí CSS - zde je příklad z pevné zápatí (všimněte si „pozice: pevná;“):
#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;
}
Budete chtít, aby se ujistil, že jste přidat nějaké margin-Bottom na svou stránku divs (ty, které vyplní hlavní část stránky) ponechat prostor pro pevné zápatí (stejný s hlavičkou pomocí margin-top).
To však není ve skutečnosti zůstat na stránce, ale proto, že umístění je tak těsný a invariant, to bude vypadat, jako by se to dělá, pokud vaše stránka načte trvat příliš dlouho. Nevím, jestli to je to, co dělá FaceBook, ale to vám dá hodně stejný účinek.
No, jak dosáhnout takového by bylo přes AJAX, ale pokud vidím, facebook ve skutečnosti to nedělá ... Jen jsem zkontrolovat, a to aktualizuje hlavičku jako většina webů ...
Edit: Když jsem poprvé odpověděl to, jsem se díval na Facebooku s Google Chrome (2.0), který z jakéhokoliv důvodu, není ve skutečnosti dělat to takhle -> když kliknu na mém profilu z domovské stránky, dává mi to v adresním řádku: http://www.facebook.com/profile.php?id=1304250071&ref=profile
a proto obnoví celou stránku ... Strange
Viz Mark Brittingham je odpověď na tom, jak to styl, i když si nemyslím, že je to, co žádáte zde. Dám vám technické podrobnosti o tom, jak to funguje (a proč to je docela geniální).
Podívejte se na stavovém řádku, když najedete na odkaz Profil v záhlaví ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Že je místo, kde je tato značka <a> ukázal. Nyní se podívejte na adresního řádku po klepnutí ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Všimněte si, že "#" identifikátorem fragment / hash ? To v podstatě dokazuje, že jste opustil stránky a předchozí žádost byla podána s AJAX. Jsou zachytí kliknutí události na tyto odkazy, a přepsání výchozí funkce s něčím jejich vlastní.
Aby se to stalo s Javascriptu, vše, co musíte udělat, je přiřadit rutinu události kliknutí na tyto odkazy, jako jsou 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 báječný výhoda tohoto přístupu je, že umožňuje tlačítko zpět, aby byly funkční (s trochou přidané podvod), která je tradičně bolestivé vedlejší účinky chronické využití AJAX. Nejsem si 100% jistý, co to podvod je, ale vsadím se, že to nějak schopen detekovat, když prohlížeč změní identifikátor fragmentu (případně pomocí zaškrtávacího políčka každých ~ 500 milisekund).
Jako vedlejší poznámku, měnící hash na hodnotu, která nelze nalézt v DOM (přes element ID) bude posouvání stránky po celou cestu na vrchol. Chcete-li zjistit, co mluvím: při posouvání dolů o 10 pixelů od horní části Facebook, vystavovat polovinu horního menu. Kliknutím na některou z položek, bude to skočit zpět do horní části stránky, jakmile je identifikátor fragment se aktualizuje (bez jakéhokoliv okna překreslit / překreslit zpoždění).
S CSS absolutní / fixní polohy, značky div, které obsahují záhlaví a zápatí mohou být kdekoli v HTML. Stejně jako na vrcholu!
Na většině současných prohlížečů je poskytnout zpoždění, čtvrtina druhý pro Firefox věřím, takže se stránka nezobrazí částečně vykreslený obsah rychlých záblesků a odpad spoustu času kreslení jako datové sítě přichází v.
Takže co se může stát je, že nová strana rychle vrátí HTML obsahující styly a záhlaví a zápatí. Tento obsah může být vyjádřen bezprostředně prohlížečem, takže když se zobrazí další stránku, se zdá, jako by ti neměnil.
V případě, že stránka je generování dynamického obsahu, dobrý trik je, aby všechny statické informace o nahoře, výstup, který a vyprázdnění vyrovnávací paměti dat. Potom proveďte dynamickou databázových dotazů a podobně.
Rozšířit Joshe Stodola je odpověď: Podle mého Pochopení Manažer YUI záložku dělá přesně tuto práci.