悬停导航栏，悬停搜索栏，像hao123一样_css怎么让导航悬停-CSDN博客

本文链接：https://blog.csdn.net/best_inh/article/details/122604390

无论是悬停导航栏，还是悬停搜索栏，原理都是一样的，运用CSS的position:fixed，通过滚动条上下滑动时计算导航栏的位置，当滚动条下拉到看不见导航栏时，触发特效代码，将导航栏悬停在顶部位置固定不动；当滚动条上拉到导航栏可见时，再还原原本的位置。

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>悬停导航栏</title>
</head>
<body>
<style>
body { max-width:1000px; margin:0 auto; font-weight:bold; text-align:center;  }
div { margin:15px auto;  }
#head { height:50px; background-color:#CCCCCC;  }
#nav { background-color:#FF9900; text-align:left;  }
#nav_fixed { background-color:#FF9900; position:fixed; top:0; z-index:9; margin:0;  }
#nav a { height:32px; line-height:32px; color:#FFFFFF; font-weight:bold; padding:0 15px;  }
#body { height:2000px; background-color:#CCCCCC;  }
#foot { height:50px; background-color:#CCCCCC;  }
</style>
<script>
//事件触发器
function addEvent(obj,type,fn){
	if(obj.attachEvent){
		obj.attachEvent('on'+type,function(){
			fn.call(obj);
		})
	}else{
		obj.addEventListener(type,fn,false);
	}
}
(function() {
	//获取元素（导航栏）距离浏览器上沿的高度
	function getOffsetTop(o) { 
		var t = o.offsetTop;
		var p = o.offsetParent;
		while (p != null) {
			t += p.offsetTop;
			p = p.offsetParent;
		}
		return t;
	}
	function fix_nav() {
		var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		var navW = nav.offsetWidth;
		var navH = nav.offsetHeight;
		//触发悬停
		if (scrollTop > navTop) {
			nav.style.width = navW + 'px';
			nav.style.height = navH + 'px';
			nav.innerHTML = '<!--悬停临时div--><div id="nav_fixed" style="width:' + navW + 'px; height:' + navH + 'px;"><!--//悬停临时div-->' + nav.innerHTML.replace(/<\!--悬停临时div-->.+?<\!--\/\/悬停临时div-->/ig, '') + '<!--悬停临时div--></div><!--//悬停临时div-->';
		}
		//位置还原
		else {
			nav.innerHTML = nav.innerHTML.replace(/<\!--悬停临时div-->.+?<\!--\/\/悬停临时div-->/ig, '');
		}
	}
	addEvent(window, "load",
	function() {
		//导航栏对象，ID自己定
		var nav = document.getElementById('nav'); 
		navTop = getOffsetTop(nav);
		//切换浏览器窗口大小时也要计算触发
		addEvent(window, "resize",
		function() {
			nav.innerHTML = nav.innerHTML.replace(/<\!--悬停临时div-->.+?<\!--\/\/悬停临时div-->/ig, '');
			nav.style.width = '100%';
			nav.style.height = 'auto';
			fix_nav();
		});
		//滚动条滑动时计算触发
		addEvent(window, "scroll", fix_nav);
	});
})();
</script>
<div id="head">head</div>
<div id="nav"><a>首页</a><a>关于我们</a><a>服务项目</a><a>客户展示</a><a>联系电话</a></div>
<div id="body">body</div>
<div id="foot">foot</div>
</html>

应用在我给客户做的网站上：http://www.furuijinzhao.com/

效果绝对自然、特别丝滑哟！

因为IE6不支持position:fixed，所以IE6就别悬停了，就使用正常效果吧；其它IE7以上都测试了no problem。