CSS javascript 結(jié)合實(shí)現(xiàn)懸浮固定菜單效果

更新時(shí)間：2015年08月23日 14:54:15 投稿：mrr

本篇文章給大家介紹基于CSS javascript 結(jié)合實(shí)現(xiàn)懸浮固定菜單效果，附有源碼下載，需要的朋友可以參考下

效果展示圖如下，兼容chrome，firefox，windows，360，搜狗等主流瀏覽器

點(diǎn)擊這里下載源碼

米撲代理，是由百度，小米出來(lái)的工程師創(chuàng)建，做得非常棒，功能很全很貼心。

JS + CSS 經(jīng)典實(shí)現(xiàn)

<!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>懸浮經(jīng)典實(shí)例請(qǐng)參考：米撲代理</p>
      <p>米撲代理價(jià)格表實(shí)例： </p>
      <p><a >http://proxy.mimvp.com/price.php</a></p>
       <p>懸浮經(jīng)典實(shí)例請(qǐng)參考： 米撲代理</p>
      <p>米撲代理價(jià)格表實(shí)例： </p>
      <p><a >http://proxy.mimvp.com/price.php</a></p>
       <p>懸浮經(jīng)典實(shí)例請(qǐng)參考： 米撲代理</p>
      <p>米撲代理價(jià)格表實(shí)例： </p>
      <p><a >http://proxy.mimvp.com/price.php</a></p>
    </div>
  </div>
</body>
</html>

運(yùn)行效果：

您可能感興趣的文章:

相關(guān)文章

有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JavaScript作用域、閉包、對(duì)象與原型鏈概念及用法實(shí)例總結(jié)
這篇文章主要介紹了JavaScript作用域、閉包、對(duì)象與原型鏈,結(jié)合實(shí)例形式總結(jié)分析了javascript中變量與函數(shù)的作用域、閉包、對(duì)象、原形鏈相關(guān)概念、用法及注意事項(xiàng),需要的朋友可以參考下
2018-08-08
使用遞歸遍歷對(duì)象獲得value值的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇使用遞歸遍歷對(duì)象獲得value值的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-06-06
通過sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證
本篇文章主要介紹了通過sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
JS 實(shí)現(xiàn) ajax 異步瀏覽器兼容問題
本文通過實(shí)例代碼給大家講解了js實(shí)現(xiàn)ajax異步瀏覽器兼容問題，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-01-01
window.dialogArguments 使用說明
window.dialogArguments 使用說明，需要的朋友可以參考下。
2011-04-04
Bootstrap table分頁(yè)問題匯總
這篇文章主要為大家匯總了Bootstrap table分頁(yè)的典型問題，以及對(duì)應(yīng)每個(gè)bootstrap table分頁(yè)問題的解決方法，感興趣的小伙伴們可以參考一下
2016-05-05
js中null與空字符串""的區(qū)別講解
今天小編就為大家分享一篇關(guān)于js中null與空字符串""的區(qū)別講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
關(guān)于JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)解決
說來(lái)慚愧es6寫了這么久,連最基本的export和import都沒搞明白,下面這篇文章主要給大家介紹了關(guān)于JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)的解決方法,需要的朋友可以參考下
2022-07-07
JavaScript隱式類型轉(zhuǎn)換
JavaScript的數(shù)據(jù)類型是非常弱的（不然不會(huì)叫它做弱類型語(yǔ)言了）！在使用算術(shù)運(yùn)算符時(shí)，運(yùn)算符兩邊的數(shù)據(jù)類型可以是任意的，比如，一個(gè)字符串可以和數(shù)字相加
2016-03-03