CSS javascript 结合实现悬浮固定菜单效果

效果展示图如下，兼容chrome，firefox，windows，360，搜狗等主流浏览器

点击这里下载源码
米扑代理，是由百度，小米出来的工程师创建，做得非常棒，功能很全很贴心。

JS + CSS 经典实现

<！DOCTYPE HTML><html lang="en-US"><head><title>悬浮固定菜单</title><style type="text/css">.wrapper {width:1000px;height:2000px;margin-left:auto;margin-right:auto;text-align: center;}.header {height:150px;}#nav {padding: 10px;position: relative;top: 0;background: #375069;width: 1000px;}#nav a {display:inline-block;margin:0 10px;*display:inline;color:white;width: 15%;}p a {margin:0 10px;width: 15%;}</style><script type="text/javascript">window.onload = function（）{menuFixed（"nav"）;}function menuFixed（id）{var obj = document.getElementById（id）;var objHeight = obj.offsetTop;window.onscroll = function（）{var obj = document.getElementById（id）;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;if（scrollTop < objHeight）{obj.style.position = "relative";}else{obj.style.position = "fixed";}}}</script></head><body><div class="wrapper"><div class="header"></div><div id="nav"><a href="http://proxy.mimvp.com">米扑代理</a><a href="http://apptop.mimvp.com">米扑排名</a><a href="http://domain.mimvp.com">米扑域名</a><a href="http://blog.mimvp.com">米扑博客</a><a href="http://forum.mimvp.com">米扑论坛</a></div><div id="content" style="text-align: left;"> <p>悬浮经典实例请参考：米扑代理</p><p>米扑代理价格表实例： </p><p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p> <p>悬浮经典实例请参考： 米扑代理</p><p>米扑代理价格表实例： </p><p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p> <p>悬浮经典实例请参考： 米扑代理</p><p>米扑代理价格表实例： </p><p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p></div></div></body></html>

运行效果：