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


Posted in Javascript onSeptember 25, 2006

不少朋友通过各种方式问我要 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"> 
<HEAD> 
<TITLE>Float Div</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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="/">Anything here</a>  
 <a href="/">Anything here</a>  
 <a href="/">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>
Javascript 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
初学prototype,发个JS接受URL参数的代码
Sep 25 #Javascript
浅谈JavaScript中面向对象技术的模拟
Sep 25 #Javascript
理解JavaScript中的事件
Sep 23 #Javascript
Valerio 发布了 Mootools
Sep 23 #Javascript
prototype.js的Ajax对象
Sep 23 #Javascript
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 #Javascript
如何实现JS函数的重载
Sep 22 #Javascript
You might like
有关PHP中MVC的开发经验分享
2012/05/17 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
js 操作select相关方法函数
2009/12/06 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
财务主管自我鉴定
2014/01/17 职场文书
安全教育实施方案
2014/03/02 职场文书
大学生自我鉴定书
2014/03/24 职场文书
学生会部长竞聘书
2014/03/31 职场文书
联谊活动总结
2014/08/28 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
公司出纳岗位职责
2015/03/31 职场文书