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

2016-02-19 11:59 0 1 收藏

图老师小编精心整理的关于Blog顶部的滚动导航条代码希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

不少朋友通过各种方式问我要 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
TITLEFloat 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;t1000;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=getFFVersion1.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

来源:https://www.tulaoshi.com/n/20160219/1599382.html

延伸阅读
标签: PS PS基础
效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面制作好了。我们可以使用裁切工具。将多余的...
标签: PHP
  //简单的用PHP编写的导航条程序   <?php //导航条配置说明:默认显示的是目录名 //如果不愿意使用目录名,请去掉下面一行注释,并修改数组元素 $label= array("目录1"="导航名1","目录2"="导航名2","目录3"="导航名3"); $ur1=$REQUEST_URI; while($ur1...
最终效果: 1.新建一个600*150的文件,背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形, 选择“添加图层样式—斜面浮雕—描边”: 得到如下效果: 2.制作高光区。新建图层,选择钢笔工具,绘出一个方框如下: 右键单击钢笔路径转换成选取并填充白色。 黑色的圆角矩形框载入选区--ctrl+左击图层,选...
电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是,告诉用户如何快速准确的到达他想要去的任何地方。 本文主要想表达的内容是: 如果某个组件具有某个属性,那就把这个属性发挥到极致;如果某个组件不具备某个属性,那么就不要把它伪装成具备这个属性,并用这个属性来诱奸用户。 简单说, 设计就是要解决问...
标签: PS PS基础
首先声明,这个透明的导航不是我发明的,我是借鉴和学习,其次,我在做的过程中遇到很多问题,是前辈们没有讲出来的。是通过我一点点研究出来的成果,所以解决的问题是原创,最后,希望把东西分享给更多的人,让大家少走弯路,多进步。 先发一组模拟的效果图 那么接下来我们开始吧 1. 新建一个画布(我的是1000*1000px,新手可以效仿)...

经验教程

719

收藏

39
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部