1 <div class="cabecera">2 Titulo3 </div>4 5 <div class="marco">6 <div class="menu-borde">7 <div id="menu" class="menu">8 uno<br>9 dos<br>10 tres<br>11 </div> 12 </div>13 <div class="contenido">14 texto<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>15 texto<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>16 texto<br>bla bla<br>texto<br>bla bla<br>texto<br>bla bla<br>17 </div>18 </div>19 20 <style type="text/css">21 .cabecera {22 height:120px;23 width:600px;24 margin:0 auto;25 background:orange;26 }27 28 .marco {29 width:600px;30 margin:0 auto;31 padding-top:16px;32 }33 34 .menu-borde {35 float:right;36 width:200px;37 }38 39 .menu {40 position:absolute;41 width:200px;42 background:lightblue;43 }44 45 .contenido {46 margin-right:200px;47 background:silver;48 height:2000px;49 }50 </style>51 52 <script type="text/javascript">53 function scrollMenu(event) {54 var y = window.scrollY;55 var menu = document.getElementById('menu');56 57 if (typeof menu.originalY === "undefined")58 menu.originalY = menu.offsetTop;59 60 if (y>menu.originalY) {61 menu.style.top = '0px';62 menu.style.position = 'fixed';63 } else {64 menu.style.top = '';65 menu.style.position = 'absolute';66 }67 }68 window.onscroll = scrollMenu;69 </script>Enlace
El enlace para compartir es: