Como dejar estatico el cabezal de nuestra web


Los sitios web modernos, traen consigo muchas funcionalidades que están "copadas". Una de ellas es el cabezal estático el cual implementé en GProjex.

A continuación les explico como incorporarlo en sus sitios web.
Cabe aclarar que ésta es la implementación a "manopla". Si utilizan algo como Bootstrap es mucho más sencillo ya que se puede implementar directamente.




¿Como funciona?

La idea general es que debemos tener compartimentada nuestra página (por practicidad y proligidad), esto quiere decir, tener tres secciones básicas y cada una dentro de un DIV (Section en Genexus):

  • Cabezal
  • Contenido
  • Pie

El código sería algo como esto:

<!DOCTYPE html>
<html lang="es-ES">
<body>
<div class="fixedhead myhead"><h1>Este es mi cabezal</h1></div>
<div class="content">
   <h2>Este es mi contenido</h2>
   <p>
   Lorem ipsum dolor sit amet...
   </p>
</div>
<div class="footer"><h1>Este es mi Pie</h1></div>
</body>
</html>

Luego, debemos establecer el cabezal con posición absoluta para inicialmente que integrado a la página. Para ello, en el código anterior pueden ver que está establecida la clase "fixedhead", que se compone como siguie:
.fixedhead{position: absolute; top: 0px;}
Lo importante con el contenido es que tenga un margen superior del mismo tamaño que el alto del cabezal. De esta forma se visualizará correctamente la página aunque tenga cabezal absoluto.

.content{margin-top: 50px !important; margin: 0px auto; min-width: 960px; max-width: 1200px;}

Luego agregamos jquery (para facilitar las cosas) y un pequeño script para cambiar el cabezal a fixed cuando realizamos scroll en la página:

<script type="text/javascript" src="jquery.1.6.1.min.js">
</script>
<script>
   window.onscroll=function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
if(top > 0)
$(".fixedhead").css("position", "fixed");
    else
$(".fixedhead").css("position", "absolute");
}


Comentarios

Entradas más populares de este blog

Buenas prácticas al nombrar objetos en GeneXus

Buenas prácticas al registrar logs en desarrollo de software

¿Por qué debiéramos tener un proyecto que aporte a la sociedad?