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

存粹是笔记呵呵

代码一：

 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 /><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>

运行结果截图：

转载于:https://www.cnblogs.com/huashanqingzhu/p/5244559.html

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

webpack 多页面 html,webpack打包多页应用，如何处理不同html页面（通过a标签）之间的跳转？...
想试着用 webpack 打包多页(多个html文件)应用,不同html之间(利用a标签)跳转只和项目文件结构路径相关,但是打包后发现页面之间跳转都是 404 了! 源码地址: https://git ...
前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
css之让尾部永远固定在页面最下方
css之让尾部永远固定在页面最下方一.开发可能遇到的问题二.如何解决方法一方法二方法三方法四一.开发可能遇到的问题当你做一个项目的时候,可能有多个页面,但是每个页面用到的头部导航栏和尾 ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
仿写小米官网（登录、注册页面、首页、详情页、购物车）
功能介绍各网页公用功能返回顶部调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部注册用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...
php架在底部页面,将页脚固定在页面底部的CSS实战
页脚的位置问题网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大 ...
vue实现详情页返回列表页，数据不加载且页面原有位置不变
常见的需求: 列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载,且保留原来浏览的位置). 1.实现页面的不重新加载使用vue的keep-alive ...
css页脚怎么这只,纯css实现内容不足时页脚在底部
当页面的内容较少时,你会发现页脚并没有在页面的底部.那么如何在内容不足时让页面始终在底部呢?你可能会说用fixed定位,只要设置bottom:0就会在底部了,那么此时当页面内容增多出现滚动条的时候,页 ...

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

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

最新文章

热门文章