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
El enlace para compartir es: