脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 →

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

 更新时间：2006年09月25日 00:00:00   作者：  
不少朋友通过各种方式问我要 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>
&nbsp;<a href="/">Anything here</a>&nbsp;
&nbsp;<a href="/">Anything here</a>&nbsp;
&nbsp;<a href="/">Anything here</a>&nbsp;
</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>
您可能感兴趣的文章:

相关文章

  • echarts自定义饼图数据刷新和颜色渲染问题浅析

    echarts自定义饼图数据刷新和颜色渲染问题浅析

    这篇文章主要给大家介绍了关于echarts自定义饼图数据刷新和颜色渲染问题的相关资料,内容简明扼要并且容易理解,绝对能使你眼前一亮,需要的朋友可以参考下
    2023-05-05
  • 多选列表框动态添加,移动,删除,全选等操作的简单实例

    多选列表框动态添加,移动,删除,全选等操作的简单实例

    本篇文章主要是对多选列表框动态添加,移动,删除,全选等操作的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    这篇文章主要实现了无需Flash无需依赖任何JS库实现文本复制与剪切，是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，叫clipboard.js，感兴趣的小伙伴们可以参考一下
    2015-10-10
  • 详解webpack与SPA实践之开发环境搭建

    详解webpack与SPA实践之开发环境搭建

    这篇文章主要介绍了详解webpack与SPA实践之开发环境搭建,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • js高精度计算decimal.js库用法demo

    js高精度计算decimal.js库用法demo

    这篇文章主要给大家介绍了关于js高精度计算decimal.js库用法的相关资料,decimal.js是使用的二进制来计算的,所以能解决js的精度问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • webpack源码之loader机制详解

    webpack源码之loader机制详解

    本篇文章主要介绍了webpack源码之loader机制详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JS & JQuery 动态添加 select option

    JS & JQuery 动态添加 select option

    这篇文章主要介绍了JS & JQuery 动态添加 select option 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-06-06
  • 用javascript获取任意颜色的更亮或更暗颜色值示例代码

    用javascript获取任意颜色的更亮或更暗颜色值示例代码

    最近在工作中遇到的一个需求，发现网上没有相对应的解决方法，索性自己写一个，所以这篇文章主要给大家介绍了关于利用javascript获取任意颜色更亮或更暗颜色值的相关资料，文中给出了详细的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • JavaScript将字符串转换为整数的方法

    JavaScript将字符串转换为整数的方法

    这篇文章主要介绍了JavaScript将字符串转换为整数的方法,涉及javascript中parseInt函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序自定义顶部导航组件

    微信小程序自定义顶部导航组件

    这篇文章主要为大家详细介绍了微信小程序自定义顶部导航组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论