div en la posicion de arriba de la pagina

carolina3 · #1 (**permalink**) 26/02/2012, 17:00

hola muy buenas me gustaría a ver si alguien conoce un tutorial para poder mantener un div en el que tengo un menú en la posición de arriba de la pagina,
es decir que si alguien baja con el scroll hacia abajo este div baje con la pagina y se mantenga arriba en su posición.

gracias

thezzin · #2 (**permalink**) 26/02/2012, 17:27

nada de php
pero quizas esto sera lo que buscas

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div top</title>
</head>
<style>
#box {
  /* Posición absolutamente, 30px abajo del top */
  position: absolute;
  top: 30px;

  /* En mi caso estoy centrado en la ventana, haz lo que quieras */
  margin-left: -100px;
  left: 40%;
  width: 400px;

  /* Estos son sólo ejemplo */
  height: 1.25em;
  border: 1px solid #bbb;
  text-align: center;
}

</style>
<script type="text/javascript">
window.onload = function() {

  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // La mayoría de los navegadores
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      return d.scrollTop;
    }

    return document.body.scrollTop;
  }

  window.onscroll = function() {
    var box = document.getElementById('box'),
        scroll = getScrollTop();

    if (scroll <= 28) {
      box.style.top = "30px";
    }
    else {
      box.style.top = (scroll + 2) + "px";
    }
  };

};
</script>
<body>
<div id='box'>Contenido del div box que se mantendrá arriba</div>
<p>Contenido....
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
<br /> Contenido
  </p>
</body>
</html>