固定菜单

  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=utf-8" />    
  5.         <script>    
  6.         // 定义菜单栏离页面顶部的距离，默认为200    
  7.         var divOffsetTop = 200;    
  8.         //滚动事件    
  9.         window.onscroll=function(){    
  10.             var div = document.getElementById("divId");    
  11.             // 计算页面滚动了多少（需要区分不同浏览器）    
  12.             var topVal = 0;    
  13.             if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678    
  14.                 topVal = window.pageYOffset;    
  15.             }    
  16.             else if(document.documentElement.scrollTop ){//IE678 的非quirk模式    
  17.                 topVal = document.documentElement.scrollTop;    
  18.             }    
  19.             else if(document.body.scrolltop){//IE678 的quirk模式    
  20.                 topVal = document.body.scrolltop;    
  21.             }    
  22.             if(topVal <= divOffsetTop){    
  23.                 div.style.position = "";    
  24.             }    
  25.             else {    
  26.                 div.style.position = "fixed";    
  27.             }    
  28.         };    
  29.         // 页面加载完之后，计算菜单栏到页面顶部的实际距离    
  30.         window.onload=function(){    
  31.             var div = document.getElementById("divId");    
  32.             divOffsetTop = div.offsetTop;    
  33.         };    
  34.         </script>    
  35.     </head>    
  36.     <body>    
  37.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  38.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  39.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  40.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  41.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  42.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  43.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  44.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  45.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  46.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  47.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  48.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  49.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  50.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  51.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  52.         <div id="divId" style=" 500px; height: 40px; line-height: 40px; top: 0px; background: pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>    
  53.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  54.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  55.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  56.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  57.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  58.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  59.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  60.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  61.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  62.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  63.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  64.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  65.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  66.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  67.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  68.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  69.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  70.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  71.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  72.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  73.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  74.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  75.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  76.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  77.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  78.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  79.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  80.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  81.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  82.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  83.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  84.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  85.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  86.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  87.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  88.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  89.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  90.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  91.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  92.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  93.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  94.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  95.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  96.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  97.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  98.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  99.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  100.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  101.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  102.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  103.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  104.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  105.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  106.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  107.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  108.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  109.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  110.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  111.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  112.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  113.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  114.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  115.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  116.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  117.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  118.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  119.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  120.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  121.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  122.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  123.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  124.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  125.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  126.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  127.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  128.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  129.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  130.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  131.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  132.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  133.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  134.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  135.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  136.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  137.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  138.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  139.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  140.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  141.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  142.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  143.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  144.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  145.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  146.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  147.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  148.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  149.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  150.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  151.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  152.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  153.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  154.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  155.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  156.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  157.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  158.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  159.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  160.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  161.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  162.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  163.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  164.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  165.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  166.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  167.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  168.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  169.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  170.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  171.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  172.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  173.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  174.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  175.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  176.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  177.         aaaaaaaaaaaaaaaaaaaaaaa<br>    
  178.     </body>    
  179. </html>    
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liucaixia/p/6201925.html