关于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 相关文章推荐
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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
239军机修复记
2021/03/02 无线电
如何过滤高亮显示非法字符
2006/10/09 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
vue观察模式浅析
2018/09/25 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
详解python基础之while循环及if判断
2017/08/24 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python 一维二维插值实例
2020/04/22 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
联强国际笔试题面试题
2013/07/10 面试题
商务英语专业自荐信
2013/10/14 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
实习单位接收函模板
2014/01/10 职场文书
银行存款证明样本
2014/01/17 职场文书
社区安全检查制度
2014/02/03 职场文书
六五普法宣传标语
2014/10/06 职场文书
2015年组织部工作总结
2015/04/03 职场文书
违纪开除通知书
2015/04/25 职场文书
浅谈python数据类型及其操作
2021/05/25 Python