1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>頂部固定菜單</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 .nav-wrapper-fixed{ position:fixed; top:0; width:100%;} 9 .nav-wrapper-fixed .nav{width:960px; margin:0 auto;} 10 .nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} 11 .nav-wrapper{ margin-top:100px; width:100%;} 12 .nav-wrapper .nav{width:960px; margin:0 auto;} 13 .nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} 14 </style> 15 <script type="text/javascript"> 16 window.onload=function(){ 17 var nav=document.getElementById('nav'); 18 var navFixed=document.getElementById('navFixed'); 19 window.onscroll=function(){ 20 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 21 document.title=scrollTop 22 if(scrollTop>nav.offsetTop){ 23 navFixed.style.display='block'; 24 }else if(scrollTop<nav.offsetTop){ 25 navFixed.style.display='none'; 26 } 27 } 28 }; 29 </script> 30 </head> 31 <body style="height:2000px;"> 32 <div class="nav-wrapper"> 33 <div class="nav" id="nav"> 34 <ul> 35 <li>菜單一</li> 36 <li>菜單二</li> 37 <li>菜單三</li> 38 <li>菜單四</li> 39 <li>菜單五</li> 40 </ul> 41 </div> 42 </div> 43 <div class="nav-wrapper-fixed" id="navFixed" style="display:none;"> 44 <div class="nav" id="nav"> 45 <ul> 46 <li>菜單一</li> 47 <li>菜單二</li> 48 <li>菜單三</li> 49 <li>菜單四</li> 50 <li>菜單五</li> 51 </ul> 52 </div> 53 </div> 54 </body> 55 </html>
自動懸浮於頂部的固定菜單 --- 可以實現新浪微博頂部導航菜單一樣的效果
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。