关于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 相关文章推荐
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 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
linux下实现定时执行php脚本
2015/02/13 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
深入解析Python编程中super关键字的用法
2016/06/24 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
Linux常见面试题
2016/10/04 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年项目工作总结
2015/04/29 职场文书
地道战观后感500字
2015/06/04 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL