CSS+JS 悬浮固定菜单效果

首先，先看实例，米扑代理： http://proxy.mimvp.com/price.php效果如下图，兼容chrome，firefox，windows，360，搜狗等主流浏览器米扑代理，是由百度，小米出来的工程师创建，做得非常棒，功能很全很贴心。 JS + CSS 经典实现12345678910111213141516171819202122232425262728293031323334353

阳光岛主

15306人浏览 · 2015-08-22 13:28:34

阳光岛主 · 2015-08-22 13:28:34 发布

首先，先看实例，米扑代理： http://proxy.mimvp.com/price.php

效果如下图，兼容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 >