• 当滚动页面到一定程度时,页顶菜单浮动固定在页面顶部


    存粹是笔记呵呵

    代码一:

     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 <title>菜单固定在页面顶部测试</title>
     6     <style type="text/css">
     7         *{margin:0 0; padding:0 0;border:0 none;}
     8         
     9         .topMenuCss1{width:1000px; position:relative; top:0; background-color:#699;}
    10         .topMenuCss2{width:1000px; position:fixed; top:0; background-color:#699;}
    11         
    12         .btn{ margin:30px 30px; padding:5px 5px;}
    13     </style>
    14     <script type="text/javascript">
    15         function setTopMenuCssClass(i)
    16         {
    17             var topMenu=document.getElementById("topMenu");
    18             if(i==1)
    19             {
    20                 topMenu.className="topMenuCss1";
    21             }
    22             else if(i==2)
    23             {
    24                 topMenu.className="topMenuCss2";
    25             }
    26         }
    27         window.onscroll=function ()
    28         {
    29             var t = document.documentElement.scrollTop || document.body.scrollTop;
    30             if(t<200) setTopMenuCssClass(1);
    31             else setTopMenuCssClass(2);
    32         };
    33     </script>
    34 </head>
    35 
    36 <body>
    37     <div style="100%; height:200px; border:2px solid blue; background-color:#9C3; "></div>
    38     
    39     <div style="margin:0 auto; padding:0 0; border:0 none; 1000px;">
    40         <div id="topMenu" class="topMenuCss1">
    41             <a href="http://www.baidu.com" target="_blank" style="margin-right:20px;">项目1</a>
    42             <a href="http://www.126.com" target="_blank" style="margin-right:20px;">项目2</a>
    43             <a href="http://www.cnblogs.com" target="_blank" style="margin-right:20px;">项目3</a>
    44         </div>
    45     </div>
    46     
    47     <br /><br /><br />
    48     <div>
    49         <input id="css1" type="button" value="样式1" class="btn" onclick="setTopMenuCssClass(1);" />
    50         <input id="css2" type="button" value="样式2" class="btn" onclick="setTopMenuCssClass(2);" />
    51     </div>
    52     
    53     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    54     111111111111111111111111111111
    55     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    56     222222222222222222222222222222
    57     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    58     333333333333333333333333333333
    59     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    60     
    61 </body>
    62 </html>

    运行结果截图:

    代码二:

     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 <title>菜单固定在页面顶部测试2</title>
     6     <style type="text/css">
     7         *{margin:0 0; padding:0 0;border:0 none;}
     8         
     9         .menu100divCss1
    10         {
    11             background-color:#f00; margin:0 0; padding:0 0; border:0 none;
    12             position:static; width:100%; height:20px;
    13         }
    14         .menu100divCss2
    15         {
    16             background-color:#f00; margin:0 0; padding:0 0; border:0 none;
    17             position:fixed; width:100%; height:20px;top:0;
    18         }
    19         
    20         .topMenuCss1{width:1000px; position:relative; top:0; background-color:#699; height:20px;}
    21         .topMenuCss2{width:1000px; position:fixed; top:0; background-color:#699; height:20px;}
    22         
    23         .btn{ margin:30px 30px; padding:5px 5px;}
    24     </style>
    25     <script type="text/javascript">
    26         function setTopMenuCssClass(i)
    27         {
    28             var menu100div=document.getElementById("menu100div");
    29             var topMenu=document.getElementById("topMenu");
    30             if(i==1)
    31             {
    32                 menu100div.className="menu100divCss1";
    33                 topMenu.className="topMenuCss1";
    34             }
    35             else if(i==2)
    36             {
    37                 menu100div.className="menu100divCss2";
    38                 topMenu.className="topMenuCss2";
    39             }
    40         }
    41         window.onscroll=function ()
    42         {
    43             var t = document.documentElement.scrollTop || document.body.scrollTop;
    44             if(t<200) setTopMenuCssClass(1);
    45             else setTopMenuCssClass(2);
    46         };
    47     </script>
    48 </head>
    49 
    50 <body>
    51     <div style="100%; height:200px; border:2px solid blue; background-color:#9C3; "></div>
    52     
    53     <div id="menu100div" class="menu100divCss1">
    54         <div style="margin:0 auto; padding:0 0; border:0 none; 1000px;">
    55             <div id="topMenu" class="topMenuCss1">
    56                 <a href="http://www.baidu.com" target="_blank" style="margin-right:20px;">项目1</a>
    57                 <a href="http://www.126.com" target="_blank" style="margin-right:20px;">项目2</a>
    58                 <a href="http://www.cnblogs.com" target="_blank" style="margin-right:20px;">项目3</a>
    59             </div>
    60         </div>
    61     </div>
    62     
    63     
    64     
    65     
    66     <br /><br /><br />
    67     <div>
    68         <input id="css1" type="button" value="样式1" class="btn" onclick="setTopMenuCssClass(1);" />
    69         <input id="css2" type="button" value="样式2" class="btn" onclick="setTopMenuCssClass(2);" />
    70     </div>
    71     
    72     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    73     111111111111111111111111111111
    74     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    75     222222222222222222222222222222
    76     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    77     333333333333333333333333333333
    78     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    79     
    80 </body>
    81 </html>

    运行结果截图:






  • 相关阅读:
    json参数http post请求
    获取文本的节点数据
    mongodb robo3t 查询所有 更改固定的50一页
    mongdb 更新字段类型
    数据库表的统计表更新 解决Sql Timeout 时间已到的问题
    html背景图圆角图片设置方法
    abp.vnext vue 跨域设置
    Springboot结合ESAPI——配置XSS过滤
    centos docker安装rabbitmq
    JAVA byte[]转String 中文问题
  • 原文地址:https://www.cnblogs.com/huashanqingzhu/p/5244559.html
走看看 - 开发者的网上家园