簡單實現(xiàn)js懸浮導航效果
更新時間：2017年02月05日 09:49:34 作者：萬花果子
這篇文章主要教大家如何簡單實現(xiàn)js懸浮導航效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js懸浮導航的具體代碼，供大家參考，具體內(nèi)容如下
<head>
<meta charset="UTF-8">
<title>懸浮導航</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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于es6中比較有用的7個技巧，文中通過示例代碼介紹的非常詳細，對大家學習或者使用es6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
這篇文章主要詳細介紹了javascript表單驗證和Window，并附上了示例代碼，非常使用，對于我們更好的了解表單驗證和Window很有幫助，這里推薦給大家2014-12-12
這篇文章主要介紹了基于javascript實現(xiàn)隨機顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹javascript獲取select標簽選中的值方法,比較實用，需要的朋友可以參考下。2016-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計時器，小程序點擊事件觸發(fā)計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
js實現(xiàn)C#的StringBuilder效果完整實例
這篇文章主要介紹了js實現(xiàn)C#的StringBuilder效果,以完整實例形式分析總結(jié)了js實現(xiàn)C#的StringBuilder效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
用JS判斷IE版本的代碼 超管用！，需要的朋友可以參考下。2011-08-08
下面小編就為大家?guī)硪黄贘S對象創(chuàng)建常用方式及原理分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Javascript筆記一 js以及json基礎(chǔ)使用說明
JavaScript中的數(shù)據(jù)很簡潔的。簡單數(shù)據(jù)只有 undefined, null, boolean, number和string這五種，而復雜數(shù)據(jù)只有一種，即object。2010-05-05