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

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

点击这里下载源码

米扑代理，是由百度，小米出来的工程师创建，做得非常棒，功能很全很贴心。

JS CSS经典实现

！DOCTYPE HTMl HTMl lang=' en-US '标题悬浮固定菜单/titlestyle type='text/css ' .包装{宽度：1000像素高度高度：2000像素左边距左：auto右边距：汽车；文本对齐：中心；} .表头{ height :150 px } # nav { padd : 10px相对位置：top : 0；背景： # 375069;宽度： 1000像素；} # nav a { display : inline-block；边距：0 10px* display:inline颜色：白色；宽度： 15%;} p a { margin:0 10px宽度： 15%;}/style脚本类型=' text/JavaScript '窗口。onload=function(){ MenuFixed(' nav ')；}函数menuFixed(id){ var obj=document。getelementbyid(id)；var ObjhThEr=obj。偏移顶部；窗户。on scroll=function(){ var obj=document。getelementbyid(id)；var滚动顶部=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；if(滚动顶部ObjThEr){ obj。风格。位置='相对'；} else { obj。风格。位置='固定'；} } }/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 pa href=' http://代理。mimvp。com/price。PHP ' http://代理。mimvp。com/price。PHP/a/p p悬浮经典实例请参考：米扑代理/p p米扑代理价格表实例：/p pa href=' http://代理。mimvp。com/price。PHP ' http://代理。mimvp。com/price。PHP/a/p p悬浮经典实例请参考：米扑代理/p p米扑代理价格表实例：/p pa href=' http://代理。mimvp。com/price。PHP ' http://代理。mimvp。com/price。PHP/a/p/div/div/body/html运行效果：