仿IBM官网导航栏js特效

仿IBM官网导航栏js特效，随着滚动条滚动，导航栏会变小，logo也会等比例缩小，导航栏文字会消失，并且随着滚动条向下滚动，导航栏会始终保持在顶部。当鼠标移动到导航栏，导航栏又会恢复到最初。完美兼容IE6浏览器。 1、css代码：

<style>
li{list-style:none;}
a:link,a:visited{outline:none;text-decoration:none;}
#wrap{width:100%;position:fixed;top:0;}
#topBar{color:#7A7A7A;height:28px;background:#131623;overflow:hidden;font:12px/28px Arial;text-align:center;}
#topBar a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
#nav{height:50px;overflow:hidden;border-top:1px solid #999;border-bottom::1px solid #666;background:#000 url(images/2011122131216590.png) repeat-x;}
#nav .logo{float:left;margin:0 20px;}
#nav .logo a{float:left;width:100px;height:50px;overflow:hidden;text-indent:-9999px;background:url(images/2011122131214364.png) no-repeat;}
#nav .logo a:hover{background-position:0 -50px;}
#nav.hide .logo a{width:100px;height:30px;background-position:0 -100px;_background-position:0 -130px;}
#nav.hide .logo a:hover{background-position:0 -130px;}
#nav ul,#nav ul li{float:left;}
#nav ul li a{float:left;color:#CCC;height:50px;font:16px/50px Arial;padding:0 20px;}
#nav ul li a:hover{color:#FFF;background:url(images/2011122131216590.png) 0 -50px repeat-x;}
#nav.hide ul{display:none;}
</style>

2、js代码：

<script>
var fgm = {
 shit: !-[1,] && !window.XMLHttpRequest,
 scrollTop: function() {
  return document.documentElement.scrollTop || document.body.scrollTop;
 },
 currentStyle: function(obj, attr) {
  return parseInt(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]);
 },
 fixed: function(element) {
  if(this.shit) {
   var top = this.currentStyle(element, "top") || 0,
   dd = "(document.documentElement)";
   document.documentElement.style.textOverflow = "ellipsis";
   element.style.position = "absolute";
   element.style.setExpression("top", "eval(" + dd + ".scrollTop + " + (top - this.scrollTop()) + ') + "px"');
  }
  else {
   element.style.position = "fixed";
  }
 },
 doMove: function(obj, iTarget, callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
   var iCur = fgm.currentStyle(obj, "height"),
   iSpeed = (iTarget - iCur) / 5;
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   iTarget == iCur ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = iSpeed + iCur + "px";
  }, 30);  
 }
};
window.onload = function() {
 var oWrap = document.getElementById("wrap"),
 oTopBar = document.getElementById("topBar"),
 oNav = document.getElementById("nav"),
 fnStatus = function(status) {
  !!status ?
  (function() {
   oNav.className = "hide";
   fgm.doMove(oTopBar, 4);
   fgm.doMove(oNav, 30);
  })() :
  (function() {
   fgm.doMove(oTopBar, 28);
   fgm.doMove(oNav, 50, function() {
    this.className = "" ;
   })
  })();
 };
 fgm.fixed(oWrap);//IE6 Fixed
 window.onscroll = function() {
  var iScrollTop = fgm.scrollTop();
  fnStatus(iScrollTop > 0);
  document.onmouseover = function(ev) {
   var oEv = ev || event,
   oTarget = oEv.target || oEv.srcElement,
   contains = function() {
    if(oWrap.contains) {
     return oWrap.contains(oTarget);
    }
    else if(oWrap.compareDocumentPosition) {
     return !!(oWrap.compareDocumentPosition(oTarget) & 16);
    }
   }();
   fnStatus(!contains && iScrollTop > 0);
  };
 };
 window.onscroll();
};
</script>

3、html代码：

<div id="wrap">
    <div id="topBar"></div>
    <!--/topBar-->
    <div id="nav">
        <div class="logo"><a href="javascript:;">IBM</a></div>
        <ul>
        <li><a title="返回网站首页" href="http://www.5imoban.net/">首页</a></li>
        <li><a title="网页PSD模板下载" href="http://www.5imoban.net/psdmoban/">PSD模板</a></li>
        <li><a title="网页CSS模板下载" href="http://www.5imoban.net/cssmoban/">CSS模板</a></li>
        <li><a title="网页特效、网页插件" href="http://www.5imoban.net/texiao/">特效插件</a></li>
        <li><a title="整站源码下载" href="http://www.5imoban.net/yuanma/">源码下载</a></li>
        <li><a title="酷站欣赏" href="http://www.5imoban.net/kuzhan/">酷站欣赏</a></li>
        <li><a title="建站资源" href="http://www.5imoban.net/ziyuan/">建站资源</a></li>
        <li><a title="建站视频教程、建站教程" href="http://www.5imoban.net/jiaocheng/">建站教程</a></li>
        <li><a title="建站心得、互联网事、心境之旅" href="http://www.5imoban.net/article/">心境之旅</a></li>
        </ul>
    </div>
    <!--/nav-->
</div>
<div style="clear:both; height:100px;"></div>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！