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

存粹是笔记呵呵

代码一：

 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>

运行结果截图：

时间： 2024-10-18 11:07:12

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

让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body { height: 100%; padding: 0; margin: 0; text-align: center; } #container { min-height: 10

将HTML页面页脚固定在页面底部(多种方法实现)

当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下作为一个Web的前端工作者学习者,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见. 那么如何将Web页面的&q

【转载自W3CPLUS】如何将页脚固定在页面底部

该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的“footer”部分永远固定在

如何将页脚固定在页面底部？

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的 “footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超

浏览器客户端智能自动化：如何取得页面中JavaScript运行时动态生成的URL？

浏览器客户端智能自动化:如何取得页面中JavaScript运行时动态生成的URL? 需求 "页面智能拼接"指的是通过启发式查询DOM树,判断出"下一页"链接,取出其href属性.Chromium的官方插件DOM Distiller完成类似的工作,主要目的就是为了将多页点击流程变成单页的Ajax连续阅读体验. 问题是,现在有些网站为了阻止浏览器客户端这么做,将href属性设置为"#"(或javascript:void()),然后在其onclick事

//可以不保存在session中, 并且前面我保存在request,这里session也可以获取 chain.doFilter(request, response); //只有登录名不为空时放行,防止直接登录成功的页面

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest httprequest = (HttpServletRequest)request; HttpServletResponse httpresponse = (HttpServletResponse)res

IIS 浏览aspx页面出现无法显示XML页的解决方法分享

这篇文章介绍了IIS 浏览aspx页面出现无法显示XML页的解决方法,有需要的朋友可以参考一下使用IIS调试.aspx程序时IE提示以下错误: 无法显示 XML 页. 使用样式表无法查看 XML 输入.请更正错误然后单击刷新按钮,或以后重试. 处理资源 'http://localhost/ 时出错.第 1 行,位置: 2 <%@ Page Language="C#" AutoEventWireup="true&qu

优化数据页面（25）——每页打印标题行

优化数据页面(25)--每页打印标题行设计要点:优化数据页面.界面设计.美化exce 阿金:说了半天的优化,都是针对显示的.其实还有一大块需要优化,那就是--打印页面. 秀秀:嗯.说得对. 阿金:光说"对"有什么用啊,给点具体的! 秀秀:别着急呀,俺正要说!最常用的就是,当数据量超出一页时,每页要重复标题行! 阿金:嗯,这还说到了点儿上! 秀秀:嚯!夸别人也是这种口气! 阿金:噢噢噢,习惯了,俺改. 秀秀:哼!本性难移! 版权声明:本文为博主原创文章,未经博主允许不得转载.

iframe中请求页面而session失效时页面跳转问题

iframe中请求页面而session失效时页面跳转问题分类: Web2009-12-11 15:01 656人阅读评论(0) 收藏举报 sessioniframejsp 有时候做了就忘了,我记得曾经在学校里老师教过这个问题,可一时就是想不起来,不过终于搜到了这么一篇文章,先记下来以便下次再得了遗忘症. 访问相关jsp页面时,往往要先判断用户session是否失效,以便决定是继续业务,还是跳转到登录页面.这个事情我们通常是用过滤器来实现的.由过滤器判断session是否失效,由此来决定请求