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

Posted 寄蜉蝣于天地，渺沧海之一粟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当滚动页面到一定程度时，页顶菜单浮动固定在页面顶部相关的知识，希望对你有一定的参考价值。

存粹是笔记呵呵

代码一：

 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="width:100%; height:200px; border:2px solid blue; background-color:#9C3; "></div>
38     
39     <div style="margin:0 auto; padding:0 0; border:0 none; width: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="width: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; width: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 以上是关于当滚动页面到一定程度时，页顶菜单浮动固定在页面顶部的主要内容，如果未能解决你的问题，请参考以下文章
 

 滚动时将菜单栏固定在顶部


 固定/粘性/浮动顶部菜单导航栏的正确名称 [关闭]


 位置：固定在菜单栏上 - 希望很简单


 滚动时固定在页面顶部的菜单栏导致下面的内容在滚动期间跳转


 React-DnD - 当顶部有固定元素时将元素拖动到屏幕顶部不会向上滚动页面


 滚动时固定/浮动的div元素