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

  1. It also included a provision to let the 카지노사이트.online tribe partner with pari-mutuel services to open sportsbooks, which means there might need been about 10 or maybe much more. Florida lawmakers were on board, and so they passed laws in May 2021 to verify the new new} compact. In August, the Department of the Interior declined to approve or deny the new new} compact, which meant it was permitted by default. On Nov. 1, the Seminoles launched Hard Rock Sportsbook online while preparing to open extra sportsbooks going forward. Online sports activities betting is at present provided in a restricted variety of U.S. states.

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Buenas prácticas al registrar logs en desarrollo de software

Buenas prácticas trabajando con parámetros o configuración del sistema

Enviando nuestros logs a Kibana rápido y simple