首頁 > 開發者 > CSS

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

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

效果展示圖如下，相容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>

運行效果：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More