Script realizado con Javascript y DHTML para que la cabecera siempre esté visible en la parte de arriba de la página, aunque se haga scroll o desplazamiento en la página.
Vamos a hacer un típico efecto DHTML para conseguir que la cabecera de la página esté siempre visible. El objetivo es que la cabecera acompañe al scroll vertical de la página, para que siempre se vea en la parte de arriba.
La explicación es simple: Tenemos una cabecera que está situada en la parte de arriba de la página y al desplazar la página verticalmente, la cabecera debe ocupar automáticamente la posición inicial, en la parte de arriba, de modo que siempre esté visible.
Visualizando el ejemplo en funcionamiento tendremos una idea precisa de lo que vamos a realizar.
El Javascript del ejemplo es muy sencillo, tal vez en lo que más empleemos tiempo es en crear el HTML y CSS necesarios para hacer la página de ejemplo.
El código HTML
Veamos el código HTML de este ejemplo. Tiene una serie de capas que vamos a posicionar inicialmente con CSS y luego dinámicamente con Javascript.
<body>
<div id=cabecera>
<div id=logo>TU LOGO</div>
<div id=enlaces>
Hola |
Enlace |
Recursos guays |
Mejoras de lo que sea |
Hoteles |
Ultimo link
</div>
</div>
<div id=contenido>
<h1>Título de la página</h1>
<p><b>Lo que vamos a ver aquí es una cabecera que siempre mantiene la posición en la parte de arriba de la página</b>. Es muy sencillo
</p>
Lorem ipsum dolor
</body>
</html>
Vemos que tiene dos partes fundamentales, por un lado la cabecera y por otro el contenido, que están colocados en dos capas independientes.
La cabecera a su vez tiene un espacio para el logotipo y un espacio para unos enlaces. Cada uno, para su ejemplo particular, pondrá tantos contenidos en la cabecera como necesite.
Por lo que respecta al contenido, es un simple texto. Sería un poco más largo de lo que hemos mostrado en el HTML anterior, porque tenemos que poner texto para que la página sea suficientemente larga como para que se pueda desplazar verticalmente.
El código CSS
Tenemos que aplicar estilos, con hojas de estilo, para que cada elemento se coloque en la posición adecuada y para que la cabecera tenga un color distinto del resto de la página y así destaque un poco.
BODY{
font-family: verdana, arial;
padding:0px;
margin:0px;
}
#cabecera {
position:absolute;
top:0px;
left:0px;
width: 100%;
height:20px;
background-color: #666666;
color: #ffcc88;
}
#logo{
float: left;
margin-left:2px;
font-weight: bold;
}
#enlaces{
float: right;
margin-right:4px;
}
#contenido{
margin: 30 5 10 5px;
}
Hemos definido que la página tenga letra verdana o arial, y que no haya márgenes.
A la cabecera le hemos asignado una posición absoluta. En un principio la colocamos en la esquina superior izquierda: la parte de arriba de la página, con top: 0px; y en la parte de la izquierda con left:0px; Además le damos un ancho del 100% y un alto de 20 píxeles. Ponemos también un fondo y un color al texto para que destaque.
Por su parte, los elementos logo y enlaces, que están dentro de la cabecera, también se han posicionado uno, el logo, a la izquerda y el otro, los enlaces, a la derecha. Se han aplicado un margen a estos dos elementos para que no queden pegados totalmente a los laterales de la página.
Por último tenemos el contenido, que lo más importante es que tiene un margen de 30 píxeles en la parte de arriba, pues tiene que dejar espacio a la cabecera, que inicialmente ocupará el espacio superior. Los otros márgenes del contenido son para que el texto no se pegue totalmente a los bordes de la página.
El código Javascript
El objetivo de este ejemplo es mover la capa cabecera a la posición necesaria para que ocupe siempre la parte de arriba. Cada vez que el visitante haga scroll vertical a la página (cada vez que mueva las barras de desplazamiento), tenemos que actualizar la posición de la capa cabecera.
Esta parte es la más sencilla, si no fuera porque tenemos que hacer código DHTML compatible con todos los navegadores. Para hacer este código compatible vamos a utilizar unas librerías que venimos utilizando y enseñando su funcionamiento en el manual de Cross-Browser DHTML compatible con todos los navegadores.
Esas librerías, denominadas X-Library, sirven para realizar fácilmente código que funcionará correctamente en los navegadores más comunes, como Internet Explorer, Firefox, Opera, etc. Nosotros vamos a utilizar solamente un par de funciones de esta librería.
xMoveTo(capa, posx, posy)
Esta función mueve una capa, cuyo identificador se pasa como primer parámetro, a la posición definida por los parámetros posx y posy.
xScrollTop()
Esta función devuelve los píxeles que se ha desplazado la página verticalmente. Es decir, nos dice la cantidad de puntos que se ha hecho scroll verticalmente.
La función que se encarga de mover la cabecera, usando estas dos funciones de la librería quedaría así:
function mueve_cabecera(){
xMoveTo("cabecera",0,xScrollTop())
}
Como se puede ver, la función es extremadamente simple. La complejidad real queda dentro de las librerías x-Library. Ahora sólo quedaría llamar a esta función cada vez que se haga scroll en la página. Esto lo podemos hacer redefiniendo el evento onscroll, que actúa cuando se mueven las barras de desplazamiento, y asignándolo a la función mueve_cabecera(). Esto se consigue con la línea de código:
window.onscroll=mueve_cabecera
El ejemplo estaría completo, de no ser porque se tiene que incluir la librería. Para esto tenemos que armar un pequeño jaleo, que se explica en el artículo X-Library Compiler.
El X Library compiler nos creará un archivo .js con el código de las funciones que hemos utilizado de la librería. Este archivo Javascript lo tenemos que incluir en la página como archivo externo.
<script src="cabecera_visible.js" type="text/javascript"></script>
El ejemplo completo lo podemos ver en una página aparte.
La explicación es simple: Tenemos una cabecera que está situada en la parte de arriba de la página y al desplazar la página verticalmente, la cabecera debe ocupar automáticamente la posición inicial, en la parte de arriba, de modo que siempre esté visible.
Visualizando el ejemplo en funcionamiento tendremos una idea precisa de lo que vamos a realizar.
El Javascript del ejemplo es muy sencillo, tal vez en lo que más empleemos tiempo es en crear el HTML y CSS necesarios para hacer la página de ejemplo.
El código HTML
Veamos el código HTML de este ejemplo. Tiene una serie de capas que vamos a posicionar inicialmente con CSS y luego dinámicamente con Javascript.
<body>
<div id=cabecera>
<div id=logo>TU LOGO</div>
<div id=enlaces>
Hola |
Enlace |
Recursos guays |
Mejoras de lo que sea |
Hoteles |
Ultimo link
</div>
</div>
<div id=contenido>
<h1>Título de la página</h1>
<p><b>Lo que vamos a ver aquí es una cabecera que siempre mantiene la posición en la parte de arriba de la página</b>. Es muy sencillo
</p>
Lorem ipsum dolor
</body>
</html>
Vemos que tiene dos partes fundamentales, por un lado la cabecera y por otro el contenido, que están colocados en dos capas independientes.
La cabecera a su vez tiene un espacio para el logotipo y un espacio para unos enlaces. Cada uno, para su ejemplo particular, pondrá tantos contenidos en la cabecera como necesite.
Por lo que respecta al contenido, es un simple texto. Sería un poco más largo de lo que hemos mostrado en el HTML anterior, porque tenemos que poner texto para que la página sea suficientemente larga como para que se pueda desplazar verticalmente.
El código CSS
Tenemos que aplicar estilos, con hojas de estilo, para que cada elemento se coloque en la posición adecuada y para que la cabecera tenga un color distinto del resto de la página y así destaque un poco.
BODY{
font-family: verdana, arial;
padding:0px;
margin:0px;
}
#cabecera {
position:absolute;
top:0px;
left:0px;
width: 100%;
height:20px;
background-color: #666666;
color: #ffcc88;
}
#logo{
float: left;
margin-left:2px;
font-weight: bold;
}
#enlaces{
float: right;
margin-right:4px;
}
#contenido{
margin: 30 5 10 5px;
}
Hemos definido que la página tenga letra verdana o arial, y que no haya márgenes.
A la cabecera le hemos asignado una posición absoluta. En un principio la colocamos en la esquina superior izquierda: la parte de arriba de la página, con top: 0px; y en la parte de la izquierda con left:0px; Además le damos un ancho del 100% y un alto de 20 píxeles. Ponemos también un fondo y un color al texto para que destaque.
Por su parte, los elementos logo y enlaces, que están dentro de la cabecera, también se han posicionado uno, el logo, a la izquerda y el otro, los enlaces, a la derecha. Se han aplicado un margen a estos dos elementos para que no queden pegados totalmente a los laterales de la página.
Por último tenemos el contenido, que lo más importante es que tiene un margen de 30 píxeles en la parte de arriba, pues tiene que dejar espacio a la cabecera, que inicialmente ocupará el espacio superior. Los otros márgenes del contenido son para que el texto no se pegue totalmente a los bordes de la página.
El código Javascript
El objetivo de este ejemplo es mover la capa cabecera a la posición necesaria para que ocupe siempre la parte de arriba. Cada vez que el visitante haga scroll vertical a la página (cada vez que mueva las barras de desplazamiento), tenemos que actualizar la posición de la capa cabecera.
Esta parte es la más sencilla, si no fuera porque tenemos que hacer código DHTML compatible con todos los navegadores. Para hacer este código compatible vamos a utilizar unas librerías que venimos utilizando y enseñando su funcionamiento en el manual de Cross-Browser DHTML compatible con todos los navegadores.
Esas librerías, denominadas X-Library, sirven para realizar fácilmente código que funcionará correctamente en los navegadores más comunes, como Internet Explorer, Firefox, Opera, etc. Nosotros vamos a utilizar solamente un par de funciones de esta librería.
xMoveTo(capa, posx, posy)
Esta función mueve una capa, cuyo identificador se pasa como primer parámetro, a la posición definida por los parámetros posx y posy.
xScrollTop()
Esta función devuelve los píxeles que se ha desplazado la página verticalmente. Es decir, nos dice la cantidad de puntos que se ha hecho scroll verticalmente.
La función que se encarga de mover la cabecera, usando estas dos funciones de la librería quedaría así:
function mueve_cabecera(){
xMoveTo("cabecera",0,xScrollTop())
}
Como se puede ver, la función es extremadamente simple. La complejidad real queda dentro de las librerías x-Library. Ahora sólo quedaría llamar a esta función cada vez que se haga scroll en la página. Esto lo podemos hacer redefiniendo el evento onscroll, que actúa cuando se mueven las barras de desplazamiento, y asignándolo a la función mueve_cabecera(). Esto se consigue con la línea de código:
window.onscroll=mueve_cabecera
El ejemplo estaría completo, de no ser porque se tiene que incluir la librería. Para esto tenemos que armar un pequeño jaleo, que se explica en el artículo X-Library Compiler.
El X Library compiler nos creará un archivo .js con el código de las funciones que hemos utilizado de la librería. Este archivo Javascript lo tenemos que incluir en la página como archivo externo.
<script src="cabecera_visible.js" type="text/javascript"></script>
El ejemplo completo lo podemos ver en una página aparte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...