• 固定菜单

    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>    
  • 相关阅读:
    atitit.解决SyntaxError: missing ] after element list"不个object 挡成个str eval ....
    atitit.软件开发概念过滤和投影 数据操作
    atitit.词法分析的实现token attilax总结
    Atitit.软件gui按钮and面板通讯子系统(区) github 的使用....
    Atitit.解决org.hibernate.DuplicateMappingException: Duplicate class/entity mapping
    atitit.故障排除 当前命令发生了严重错误。应放弃任何可能产生的结果sql server 2008
    Atitit.注解解析(1)词法分析 attilax总结 java .net
    atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
    atitit.报表最佳实践oae 与报表引擎选型
    Atitit. 解决unterminated string literal 缺失引号
  • 原文地址：https://www.cnblogs.com/liucaixia/p/6201925.html
Copyright © 2020-2023  润新知