Al navegar por las páginas de Facebook, el encabezado y la sección fija del pie de página permanecen visibles entre las cargas de la página Y la URL en la barra de direcciones cambia en consecuencia. Al menos, esa es la ilusión que tengo.
¿Cómo lo logra Facebook desde el punto de vista técnico?
Una forma de proporcionar encabezados y pies de página que parecen invariantes es a través de CSS: aquí hay un ejemplo de un pie de página fijo (observe la "posición: fija"):
#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;
}
Deberá asegurarse de agregar un Margin-Bottom a los separadores de página (los que llenan la parte principal de la página) para dejar espacio para el pie de página fijo (lo mismo con un encabezado usando Margin-Top).
En realidad, esto no se queda en la página, pero, debido a que el posicionamiento es tan ajustado e invariable, parecerá que sí lo está, a menos que la carga de la página tarde demasiado. No sé si esto es lo que FaceBook hace, pero le dará el mismo efecto.
Bueno, la forma de lograr tal cosa sería a través de AJAX, pero hasta donde puedo ver, Facebook, de hecho, no hace esto ... Acabo de comprobar, y refresca el encabezado como la mayoría de los sitios ...
Editar: Cuando respondí esto por primera vez, estaba buscando en Facebook con Google Chrome (2.0), que por alguna razón, en realidad no lo hace de esta manera -> cuando hago clic en Mi perfil desde la página de inicio, me da esto en la barra de direcciones: http://www.facebook.com/profile.php?id=1304250071&ref=profile
y por lo tanto refresca toda la página ... Extraño
Consulte la respuesta de Mark Brittingham sobre cómo darle estilo, aunque no creo que eso sea lo que está preguntando aquí. Le daré los detalles técnicos sobre cómo funciona (y por qué es bastante brillante).
Eche un vistazo a la barra de estado cuando coloca el mouse sobre el enlace de Perfil en el encabezado ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
Ahí es donde se señala esa etiqueta <a>. Ahora mira la barra de direcciones cuando haces clic en ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
Observe el identificador de fragmento "#" / hash ? Esto básicamente demuestra que no ha salido de la página y que la solicitud anterior se realizó con AJAX. Están interceptando los eventos de clic en estos enlaces y anulando la funcionalidad predeterminada con algo propio.
Para que esto suceda con Javascript, todo lo que tiene que hacer es asignar un controlador de evento click a esos enlaces como tal ...
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;
}
}
Un beneficio fabuloso de este enfoque es que permite que el botón de retroceso sea funcional (con un pequeño truco añadido), que tradicionalmente ha sido un efecto secundario doloroso del uso crónico de AJAX. No estoy 100% seguro de lo que es este truco, pero apuesto a que de alguna manera es capaz de detectar cuándo el navegador modifica el identificador de fragmento (posiblemente al verificarlo cada ~ 500 milisegundos).
Como nota al margen, cambiar el hash a un valor que no se puede encontrar dentro del DOM (a través del ID del elemento) desplazará la página hasta la parte superior. Para ver de lo que estoy hablando: se desplaza hacia abajo unos 10 píxeles desde la parte superior de Facebook, exponiendo la mitad del menú superior. Haga clic en uno de los elementos, saltará de nuevo a la parte superior de la página tan pronto como el identificador de fragmento se actualice (sin ningún retraso en el repintado / redibujado de la ventana).
Con el posicionamiento absoluto / fijo de CSS, las etiquetas div que contienen los encabezados y pies de página pueden estar en cualquier parte del HTML. Al igual que en la parte superior!
En la mayoría de los navegadores actuales hay un retraso de procesamiento, creo que un cuarto de segundo para Firefox, por lo que la página no mostrará contenido parcialmente renderizado en flashes rápidos y perderá mucho tiempo dibujando a medida que ingresen los datos de la red.
Entonces, lo que puede suceder es que la nueva página devuelva rápidamente HTML que contiene los estilos, el encabezado y el pie de página. Este contenido puede ser procesado inmediatamente por el navegador, de modo que cuando muestra la página siguiente, parece que no cambió.
Si la página está generando contenido dinámico, un buen truco es colocar toda la información estática en la parte superior, generarla y vaciar el búfer de datos. A continuación, haga las consultas dinámicas de la base de datos y tal.
Para aumentar la respuesta de Josh Stodola : Según tengo entendido, el Administrador de marcadores de YUI hace exactamente este trabajo.