IBM官方网站导航菜单自动隐藏特效，拖动滚动条超过时，自动缩小隐藏，拖上去后恢复全部显示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟IBM官网导航条超过隐藏效果_武鸣人</title>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<style>
body,div,ul,li{margin:0;padding:0;}
body{height:2000px;background:#F0F0F0;}
li{list-style:none;}
a:link,a:visited{outline:none;text-decoration:none;}
#wrap_www_wuming_ren{width:100%;position:fixed;top:0;}
#bar_wuming_ren{color:#7A7A7A;height:28px;background:#131623;overflow:hidden;font:12px/28px Arial;text-align:center;}
#bar_wuming_ren 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(/img/20240220_wuming_ren_11.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(/img/20240220_wuming_ren_12.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(/img/20240220_wuming_ren_11.png) 0 -50px repeat-x;}
#nav.hide ul{display:none;}
</style>
<script>
var wuming = {
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 = wuming.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);
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload = function() {
var oWrap = document.getElementById("wrap_www_wuming_ren"),
oTopBar = document.getElementById("bar_wuming_ren"),
oNav = document.getElementById("nav"),
fnStatus = function(status) {
!!status ?
(function() {
oNav.className = "hide";
wuming.doMove(oTopBar, 4);
wuming.doMove(oNav, 30);
})() :
(function() {
wuming.doMove(oTopBar, 28);
wuming.doMove(oNav, 50, function() {
this.className = "";
})
})();
};
wuming.fixed(oWrap);//IE6 Fixed
window.onscroll = function() {
var iScrollTop = wuming.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();
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<!--<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>-->
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="wrap_www_wuming_ren">
<div id="bar_wuming_ren">下拉滚动条看效果</div>
<!--/bar_wuming_ren-->
<div id="nav">
<div class="logo"><a href="https://wuming.ren">IBM</a></div>
<ul>
<li><a href="https://wuming.ren">解决方案</a></li>
<li><a href="https://wuming.ren">服务</a></li>
<li><a href="https://wuming.ren">产品</a></li>
<li><a href="https://wuming.ren">支持与下载</a></li>
<li><a href="https://wuming.ren">个性化服务</a></li>
</ul>
</div>
<!--/nav-->
</div>
<!--/wrap_www_wuming_ren-->
</body>
</html>本文来自武鸣人网站，转载请注明出处