快捷導(dǎo)航

關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼

更新時(shí)間：2006年09月25日 00:00:00 作者：

不少朋友通過(guò)各種方式問(wèn)我要 Blog 頂部的滾動(dòng)導(dǎo)航菜單的代碼。其實(shí)也沒(méi)什么特別的，但既然有需求，我就還是把這部分代碼整理出來(lái)，供大家參考。

<!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>

您可能感興趣的文章:

關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼

相關(guān)文章

這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東搜索框?qū)嵗?，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03

Javascript DOM事件操作小結(jié)(監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放，懸停、離開等)

這篇文章主要介紹了Javascript DOM事件操作,結(jié)合實(shí)例形式總結(jié)分析了javascript監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放，懸停、離開等操作技巧,需要的朋友可以參考下

2017-01-01

JS使用Expires?max-age判斷緩存過(guò)期的瀏覽器實(shí)例

這篇文章主要為大家介紹了JS使用Expires?max-age判斷緩存過(guò)期的瀏覽器實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

2023-11-11

JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2020-04-04

淺談TypeScript的類型保護(hù)機(jī)制

這篇文章主要介紹了淺談TypeScript的類型保護(hù)機(jī)制,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

2020-02-02