CSS javascript 結合實現懸浮固定菜單效果

2019-11-20 11:45:39

字體：大中小

來源：轉載

供稿：網友

效果展示圖如下，兼容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 >米撲代理</a>      <a >米撲排名</a>      <a >米撲域名</a>      <a >米撲博客</a>      <a >米撲論壇</a>    </div>    <div id="content" style="text-align: left;">       <p>懸浮經典實例請參考：米撲代理</p>      <p>米撲代理價格表實例： </p>      <p><a >http://proxy.mimvp.com/price.php</a></p>       <p>懸浮經典實例請參考： 米撲代理</p>      <p>米撲代理價格表實例： </p>      <p><a >http://proxy.mimvp.com/price.php</a></p>       <p>懸浮經典實例請參考： 米撲代理</p>      <p>米撲代理價格表實例： </p>      <p><a >http://proxy.mimvp.com/price.php</a></p>    </div>  </div></body></html>

運行效果：