关于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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
详解javascript高级定时器
Dec 31 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JS正则表达式常见函数与用法小结
Apr 13 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
浏览器常用高宽的jquery插件
2011/02/24 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
详解VUE 数组更新
2017/12/16 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
详解Python流程控制语句
2020/10/28 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
小学生获奖感言范文
2014/02/02 职场文书
课外活动总结范文
2014/07/09 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Python 数据可视化之Matplotlib详解
2021/11/02 Python
解决vue中provide inject的响应式监听
2022/04/19 Vue.js