Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCodeTreeCode

Goose, la red social libre

PleasOn - Menu QR
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

HTMLCSSJSVista previa
1 El *objetivo* consiste en tener un menú que se mantenga visible en la parte superior cuando se empiece a perder de vista haciendo scroll.2 3 La *clave* es detectar con javascript cuándo se está empezando a perder de vista para asignarle el estilo position:fixed; top:0;4 5 Este código se puede ver en funcionamiento en "http://www.treeweb.es/ShareCode/a09c87b4ae0c8fc596e356ec915f230f":http://www.treeweb.es/ShareCode/a09c87b4ae0c8fc596e356ec915f230f6 7 <div class="cabecera">8  Titulo9 </div>10 11 <div class="marco">12  <div class="menu-borde">13  <div id="menu" class="menu">14  uno<br>15  dos<br>16  tres<br>17  </div> 18  </div>19  <div class="contenido">20  texto<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>21  texto<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>22  texto<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>23  </div>24 </div>25 26 <style type="text/css">27  .cabecera {28  height:120px;29  width:600px;30  margin:0 auto;31  background:orange;32  }33  34  .marco {35  width:600px;36  margin:0 auto;37  padding-top:16px;38  }39  40  .menu-borde {41  float:right;42  width:200px;43  }44  45  .menu {46  position:absolute;47  width:200px;48  background:lightblue;49  }50  51  .contenido {52  margin-right:200px;53  background:silver;54  height:2000px;55  }56 </style>57 58 <script type="text/javascript">59  function scrollMenu(event) {60  var y = window.scrollY;61  var menu = document.getElementById('menu');62  63  if (typeof menu.originalY === "undefined")64  menu.originalY = menu.offsetTop;65  66  if (y>menu.originalY) {67  menu.style.top = '0px';68  menu.style.position = 'fixed';69  } else {70  menu.style.top = '';71  menu.style.position = 'absolute';72  }73  }74  window.onscroll = scrollMenu;75 </script>
Enlace Duplicar
Enlace
El enlace para compartir es: