Bij het bladeren door de Facebook-pagina's de kop- en vaste rubriek footer zichtbaar blijven tussen de pagina wordt geladen en de URL in de adresbalk verandert dienovereenkomstig. Tenminste, dat is de illusie die ik krijg.
Hoe werkt Facebook bereiken dat technisch gesproken?
Een manier om kop- en voetteksten die onveranderlijk lijken leveren is via CSS - is hier een voorbeeld van een vaste voettekst (let op de "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;
}
U zult willen ervoor zorgen dat u een aantal margin-bottom toe te voegen aan uw pagina divs (die de belangrijkste gedeelte van de pagina te vullen) om ruimte voor de vaste voettekst (hetzelfde met een header met behulp van margin-top) vertrekken.
Dit betekent niet echt blijven op de pagina, maar, omdat de positionering is zo strak en onveranderlijk, het zal lijken alsof het doet, tenzij uw pagina wordt geladen te lang duren. Ik weet niet of dit is wat FaceBook doet, maar het zal u veel hetzelfde effect geven.
Nou, de manier om te bereiken zoiets zou zijn door middel van AJAX, maar voor zover ik kan zien, facebook in feite doet dit niet ... Ik heb net gecontroleerd, en het verfrist de header zoals de meeste plaatsen ...
Edit: Toen ik dit voor het eerst beantwoord, was ik op zoek naar Facebook met Google Chrome (2.0), die om wat voor reden dan ook, niet daadwerkelijk op deze manier doen -> toen ik op mijn profiel op de homepage klikt, het geeft me dit in de adresbalk: http://www.facebook.com/profile.php?id=1304250071&ref=profile
en verfrist daarom de hele pagina ... Strange
Verwezen naar het antwoord Mark Brittingham voor hoe te stylen, hoewel ik denk niet dat dat is wat je hier vraagt. Ik zal u de technische details over hoe het werkt (en waarom het is vrij briljant) te geven.
Neem een kijkje op de statusbalk wanneer u de muisaanwijzer over de koppeling Profiel in de kop ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Dat is waar dat <a> tag wordt gewezen op. Kijk nu naar de adresbalk wanneer u erop klikt ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Let op de "#" fragment identifier / hash ? Dit bewijst in feite dat u niet de pagina hebben verlaten en de eerder verzoek werd gemaakt met AJAX. Ze zijn het onderscheppen van de klik evenementen op deze links, en overschrijven van de standaard functionaliteit met iets van hun eigen land.
Om dit te realiseren met Javascript, alles wat je hoeft te doen is een klik event handler toe te wijzen aan deze banden zoals zo ...
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;
}
}
Een fantastisch voordeel van deze aanpak is dat het laat de knop terug naar functioneel zijn (met een beetje extra bedrog), die van oudsher een pijnlijke neveneffect van chronische AJAX gebruik is geweest. Ik ben niet 100% zeker van wat dit bedrog is, maar ik wed dat het een of andere manier in staat om te detecteren wanneer de browser het fragment identifier wijzigt (eventueel door het controleren van het elke ~ 500 milliseconden).
Even terzijde, verandert de hash tot een waarde die niet kan worden gevonden in de DOM (via element ID) wordt de pagina scroll helemaal naar boven. Om te zien wat ik het over heb: je naar beneden scrollt ongeveer 10 pixels vanaf de bovenkant van Facebook, het blootstellen van de helft van het bovenste menu. Klik op een van de items, zal het springen terug naar de top van de pagina zodra het fragment identifier wordt bijgewerkt (zonder enig venster te herschilderen / opnieuw te tekenen vertraging).
Met CSS absolute / vaste positionering, kan de div-tags die de kop- en voetteksten overal in de HTML zijn. Net als bij de top!
Op de meeste huidige browsers is er een render-vertraging, een kwart seconde voor Firefox Ik geloof, zodat de pagina gedeeltelijk weergegeven inhoud in een snelle flitsen niet wordt weergegeven en verspillen veel tijd tekenen als netwerkgegevens komt.
Dus wat kan gebeuren is dat de nieuwe pagina snel hersteld HTML met de stijlen en de kop- en voettekst. Deze content kan direct worden gemaakt door de browser, dus als het de volgende pagina geeft, lijkt het alsof die niet veranderen.
Als de pagina is het genereren van dynamische inhoud, een goede truc is om alle statische informatie aan de top, output dat en spoel de data buffer te zetten. Dan doe het dynamische database queries en dergelijke.
Om te vergroten Josh Stodola's antwoord: In mijn begrip de YUI Bookmark Manager doet precies deze baan.