簡單實(shí)現(xiàn)js懸浮導(dǎo)航效果

更新時(shí)間：2017年02月05日 09:49:34 作者：萬花果子

這篇文章主要教大家如何簡單實(shí)現(xiàn)js懸浮導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js懸浮導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下

<head>
 <meta charset="UTF-8">
 <title>懸浮導(dǎo)航</title>
 <style>
  * {
   margin: 0px;
   padding: 0px;
  }
  ul li{
   list-style: none;
  }
  body{
   height: 2000px;
  }
  #top{
   height: 300px;
   width: 100%;
   background-color: red;
  }
  #nav{
   height: 50px;
   line-height: 50px;
   width: 100%;
   background-color: pink; 
  }
  #nav ul{
   width: 1200px;
   margin: 0 auto;
  }
  #nav ul li{
   float: left;
   width: 164px;
   text-align: center;
  }
 </style>
</head>
<body>
 <div id="top">
  頂部
 </div>
 <div id="nav">
  <ul>
   <li>首頁</li>
   <li>首頁</li>
   <li>首頁</li>
   <li>首頁</li>
   <li>首頁</li>
   <li>首頁</li>
   <li>首頁</li>
  </ul>
 </div>
</body>
<script>
 var ad = document.getElementById("nav")
 window.onscroll = function(){
  var _top = document.body.scrollTop || document.documentElement.scrollTop;//兼容
  if(_top>=300){
   ad.style.position = "fixed";
   ad.style.top = 0 +"px";
  }else{
   ad.style.position = "absolute";
   ad.style.top = 300+"px";
  }
 }
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS中Eval解析JSON字符串的一個小問題
JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧，下面通過本文給大家介紹JS中Eval解析JSON字符串的一個小問題，需要的朋友參考下吧
2016-02-02
JavaScript中創(chuàng)建類/對象的幾種方法總結(jié)
這篇文章主要是對JavaScript中創(chuàng)建類/對象的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
在HTML代碼中使用JavaScript代碼的例子
這篇文章主要介紹了在HTML代碼中使用JavaScript代碼的例子,本文是入門級示例,初學(xué)js的同學(xué)不要錯過,需要的朋友可以參考下
2014-10-10
解讀new?Object()和Object.create()的區(qū)別
這篇文章主要介紹了解讀new?Object()和Object.create()的區(qū)別及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
JavaScript檢測鼠標(biāo)移動方向的方法
這篇文章主要介紹了JavaScript檢測鼠標(biāo)移動方向的方法,涉及javascript鼠標(biāo)操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JSONP跨域的原理解析及其實(shí)現(xiàn)介紹
JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實(shí)現(xiàn)的，并且探討下JSONP跨域的原理
2014-03-03
webpack4.x打包過程詳解
這篇文章主要介紹了webpack4.x打包過程詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
JS在IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)
IE和FireFox之間常用函數(shù)的區(qū)別小結(jié)，需要的朋友可以參考下。
2010-03-03
JavaScript的arguments對象應(yīng)用示例
使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們，下面為大家介紹下其具體的應(yīng)用
2014-09-09
JS實(shí)現(xiàn)進(jìn)度條順滑版詳細(xì)方案
最近在小程序里，做了一個類似微博刷視頻的需求，其中有一部分功能需要實(shí)現(xiàn)自定義進(jìn)度條，在做完第一版之后發(fā)現(xiàn)進(jìn)度條不順滑，而后想查查網(wǎng)上看有沒有什么好的方案，但最終沒找到合適的。下面給大家分享JS進(jìn)度條順滑版實(shí)現(xiàn)代碼，需要的朋友參考下吧
2021-08-08