关于Blog顶部的滚动导航条代码

Zeal Blog - 泽欧里

订阅我的日志

梦想就像鸡蛋
要么孵化要么臭掉

Posted by zeal on 2006-09-13 17:13 , 9936 characters | + 2 - 0 English

转载请保留本行原始链接信息 : http://www.zeali.net/entry/432 MADE 1n ZEAL

不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码。其实也没什么特别的，但既然有需求，我就还是把这部分代码整理出来，供大家参考。附加冰男所要求的浮动在窗口底部的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <HEAD> <TITLE> Float Div </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <style type="text/css"> #zealNavigatorBar { position: absolute; z-index: 100; width: 760px; height: 32px; line-height: 32px; top: 0px; left: 0px; padding: 0px; margin: 0px; border-bottom:1px solid #646465; background-color: #C0C0C3; } </style> </HEAD> <BODY> <div id=zealNavigatorBar> <a href="http://www.zeali.net/">Anything here</a> <a href="http://www.zeali.net/">Anything here</a> <a href="http://www.zeali.net/">Anything here</a> </div> <script language="JavaScript"> for(var t=0;t<1000;t++) document.writeln('Test content: line '+t+'<br />'); </script> <script language="JavaScript"> var g_myBodyInstance = document.body; var g_myBodyInstanceString = "document.body"; if(document.compatMode != "BackCompat"){ // for looser.dtd g_myBodyInstance = document.documentElement; g_myBodyInstanceString = "document.documentElement"; } var isMinNS4 = (navigator.appName.indexOf("Netscape") >= 0 && parseFloat(navigator.appVersion) >= 4) ? 1 : 0; var isMinNS5 = (navigator.appName.indexOf("Netscape") >= 0 && parseFloat(navigator.appVersion) >= 5) ? 1 : 0; var isMinIE4 = (document.all) ? 1 : 0; var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0) ? 1 : 0; var isMacIE = (isMinIE4 && navigator.userAgent.indexOf("Mac") >= 0) ? 1 : 0; var getFFVersion=navigator.userAgent.substring( navigator.userAgent.indexOf("Firefox")).split("/")[1]; //extra height in px to add to iframe in FireFox 1.0+ browsers var FFextraHeight=getFFVersion<1.5? 16 : 0; function getLayer(name) { if (isMinNS5) return document.getElementById(name); else if (isMinIE4) return eval('document.all.' + name); else if (isMinNS4) return findLayer(name, document); return null; } function findLayer(name, doc) { var i, layer; for (i = 0; i < doc.layers.length; i++) { layer = doc.layers[i]; if (layer.name == name) return layer; if (layer.document.layers.length > 0) { layer = findLayer(name, layer.document); if (layer != null) return layer; } } return null; } function moveLayerTo(layer, x, y) { if (isMinIE4) { layer.style.left = x; layer.style.top = y; } else if (isMinNS5) { layer.style.left = x+'px'; layer.style.top = y+'px'; } else if (isMinNS4) layer.moveTo(x, y); } function getPageLeft(layer) { if (isMinIE4||isMinNS5) return(layer.offsetLeft); else if (isMinNS4) return(layer.pageX); return(-1); } function getPageTop(layer) { if (isMinIE4||isMinNS5) return(layer.offsetTop); else if (isMinNS4) return(layer.pageY); return(-1); } function getPageScrollX() { if (isMinIE4||isMinNS5) return(g_myBodyInstance.scrollLeft); else if (isMinNS4) return(window.pageXOffset); return(-1); } function getPageScrollY() { if (isMinIE4||isMinNS5) return(g_myBodyInstance.scrollTop); else if (isMinNS4) return(window.pageYOffset); return(-1); } var g_p_zealNavigatorBar = null; g_p_zealNavigatorBar = getLayer('zealNavigatorBar'); if(!isMinIE4){g_p_zealNavigatorBar.style.position = 'fixed';} function reposzealNavigatorBar(){ if(isMinIE4){ try{ moveLayerTo(g_p_zealNavigatorBar, getPageLeft(g_p_zealNavigatorBar), getPageScrollY()); }catch(e){} } } window.onresize = reposzealNavigatorBar; window.onscroll = reposzealNavigatorBar; window.onload = reposzealNavigatorBar; </script> </BODY> </HTML>

代码可以运行于 IE / Firefox / Opera 下。

Updated 2006-10-18 16:37 -- 对于冰男提出的把浮动层显示在窗口的底部问题，但对于 IE 来说比较好办，但如果要同样兼容于 IE / NS / Firefox / Opera 的话，需要增加一些额外的处理代码，同时对于 Firefox 来讲那个有趣的 fixed 属性就不好派上用场了。下面是浮动层固定在浏览器窗口底部的完整示例代码，其中的差别请各位自己研究下：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <HEAD> <TITLE> Float Div </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <style type="text/css"> #zealNavigatorBar { position: absolute; z-index: 100; width: 760px; height: 32px; line-height: 32px; top: 0px; left: 0px; padding: 0px; margin: 0px; border-bottom:1px solid #646465; background-color: #C0C0C3; } </style> </HEAD> <BODY> <div id=zealNavigatorBar> <a href="http://www.zeali.net/">Anything here</a> <a href="http://www.zeali.net/">Anything here</a> <a href="http://www.zeali.net/">Anything here</a> </div> <script language="JavaScript"> for(var t=0;t<1000;t++) document.writeln('Test content: line '+t+'<br />'); </script> <script language="JavaScript"> var g_myBodyInstance = document.body; var g_myBodyInstanceString = "document.body"; var isOpera = (navigator.appName.indexOf("Opera") >= 0) ? 1 : 0; if(document.compatMode != "BackCompat" && !isOpera){ // for looser.dtd g_myBodyInstance = document.documentElement; g_myBodyInstanceString = "document.documentElement"; } var isMinNS4 = (navigator.appName.indexOf("Netscape") >= 0 && parseFloat(navigator.appVersion) >= 4) ? 1 : 0; var isMinNS5 = (navigator.appName.indexOf("Netscape") >= 0 && parseFloat(navigator.appVersion) >= 5) ? 1 : 0; var isMinIE4 = (document.all) ? 1 : 0; var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0) ? 1 : 0; var isMacIE = (isMinIE4 && navigator.userAgent.indexOf("Mac") >= 0) ? 1 : 0; var getFFVersion=navigator.userAgent.substring( navigator.userAgent.indexOf("Firefox")).split("/")[1]; //extra height in px to add to iframe in FireFox 1.0+ browsers var FFextraHeight=getFFVersion<1.5? 16 : 0; function getLayer(name) { if (isMinNS5) return document.getElementById(name); else if (isMinIE4) return eval('document.all.' + name); else if (isMinNS4) return findLayer(name, document); return null; } function findLayer(name, doc) { var i, layer; for (i = 0; i < doc.layers.length; i++) { layer = doc.layers[i]; if (layer.name == name) return layer; if (layer.document.layers.length > 0) { layer = findLayer(name, layer.document); if (layer != null) return layer; } } return null; } function moveLayerTo(layer, x, y) { if (isMinIE4) { layer.style.left = x; layer.style.top = y; } else if (isMinNS5) { layer.style.left = x+'px'; layer.style.top = y+'px'; } else if (isMinNS4) layer.moveTo(x, y); } function getPageLeft(layer) { if (isMinIE4||isMinNS5) return(layer.offsetLeft); else if (isMinNS4) return(layer.pageX); return(-1); } function getPageTop(layer) { if (isMinIE4||isMinNS5) return(layer.offsetTop); else if (isMinNS4) return(layer.pageY); return(-1); } function getPageScrollX() { if (isMinIE4||isMinNS5) return(g_myBodyInstance.scrollLeft); else if (isMinNS4) return(window.pageXOffset); return(-1); } function getPageScrollY() { if (isMinIE4||isMinNS5) return(g_myBodyInstance.scrollTop); else if (isMinNS4) return(window.pageYOffset); return(-1); } function getHeight(layer) { if (isMinIE4||isMinNS5) { if (false && layer.style.pixelHeight) return(layer.style.pixelHeight); else return(layer.clientHeight); } else if (isMinNS4) { if (layer.document.height) return(layer.document.height); else return(layer.clip.bottom - layer.clip.top); } return(-1); } function getWindowHeight() { if (isMinIE4||isMinNS5) return(g_myBodyInstance.clientHeight); else if (isMinNS4) return(window.innerHeight); return(-1); } var g_p_zealNavigatorBar = null; g_p_zealNavigatorBar = getLayer('zealNavigatorBar'); //if(!isMinIE4){g_p_zealNavigatorBar.style.position = 'fixed';} function reposzealNavigatorBar(){ //if(isMinIE4){ try{ moveLayerTo(g_p_zealNavigatorBar, getPageLeft(g_p_zealNavigatorBar), getPageScrollY()+ getWindowHeight()-getHeight(g_p_zealNavigatorBar)); }catch(e){} //} } window.onresize = reposzealNavigatorBar; window.onscroll = reposzealNavigatorBar; window.onload = reposzealNavigatorBar; </script> </BODY> </HTML>

This Entry was Last Modified on 2007-05-28 14:34

对于这篇日志有什么看法？我想听听您的高见:

您也可以在页面底部的 Google Friend Connect 工具栏进行评论，体验更好的互动交流 »

首先为了证明您不是没有思想的机器Spammer，请告诉我 4 + 8 = ？

然后任选以下两种方式之一告诉我您的身份：

1. 使用您的 OpenID

在ZeaLi.net注册OpenID 什么是OpenID?

2. 使用传统留言格式

(必填) 名字

(选填) URL

(选填) Email

并写下您的见解:

记住我?
是
否

如何进行评论当有新回复时给我发送邮件通知

除了 <b> 和 <i> 之外，其他的HTML标签都将从您的评论中去除. URL 或 Email 地址会被自动加上链接.
当您点击发表或者预览之后，系统会自动保存您此次评论的内容，以便当网络原因发表失败时直接按Ctrl-V重新粘贴上次评论内容。
注意：快捷键及自动拷贝功能仅对IE浏览器有效。

15 条评论:

- mei美 () (link) 于 2006-09-13 17:59

谢谢提供。可以用上了。

- Gavin (link) 于 2006-09-14 13:46

哈哈,不错,不错!

- kevin () (link) 于 2006-09-17 15:16

同样的我看到有滚动导航栏加在下面的在那里变动一下呢？

- zeal (link) 于 2006-09-18 01:49

只需要修改reposzealNavigatorBar把导航栏移动到特定的位置即可。

- ralf () (link) 于 2006-09-19 10:18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t..
你好，想问问以上的这些代码起什么作用，是不是类似于一个程序/代码集的意思？
因为有些javascript代码有这些内容和没有的时候效果不同。

- zeal (link) 于 2006-09-19 11:21

是的。由于历史原因，xhtml的语法有不同的版本，有些版本是不向下兼容的。定义了DOCTYPE就是告诉浏览器用什么标准来解析页面内容。

- liveonnet (link) 于 2006-09-19 14:59

好玩的东东，等有机会再用，收藏了，谢谢！@

- ahu 于 2006-10-08 17:53

友情报告一下：也可以运行于最新版的opera下！

- 冰男 () 于 2006-10-15 04:54

请你说一下这个代码，怎么才能让它改放在底部好吗？要怎么修改？请教了！

- 冰男 () 于 2006-10-15 04:58

看了您的上面说明：只需要修改reposzealNavigatorBar把导航栏移动到特定的位置即可。可是具体要改哪里还是不懂！请您指教了！

- zeal (link) 于 2006-10-18 16:44

to 冰男: 代码贴出来了，具体的差别自己研究吧：）

- 冰男 () 于 2006-10-19 16:28

感谢zeal，看到回答，真的令我感动不已！还有个问题，就是您提供的底部代码，打开后，默认的还是在顶部，瞬间再回到底部的，我把里面的top英文逐个替换成底部的英文，都没有用，唉，汗，见笑了！

- zeal (link) 于 2006-10-20 09:35

那是因为浮动层缺省的css样式里面设置了初始位置:
#zealNavigatorBar {
position: absolute;
z-index: 100;
width: 760px;
height: 32px;
line-height: 32px;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border-bottom:1px solid #646465;
background-color: #C0C0C3;
}
你可以把它先设置成 display:none; 然后在reposzealNavigatorBar的时候再显示出来。
建议你先把css/dhtml/javascript的基础多了解一些。否则别人写给你的代码永远只是让你ctrl-c,ctrl-v的东西，而不是自己的东西。

- 冰男 () 于 2006-10-20 15:39

嗯，谢谢zeal指导！

- 冰男 () (link) 于 2007-09-12 08:44

我又来了,突然想起这里,特来表示感谢,我把代码转载到"找找社区"里了,留作备用,谢谢!

日志存档

2009年

06 05 04 03 02 01

2008年