思想：導航在這里只有兩種狀態，一種是初始狀態、一種是固定布局狀態。實現懸浮導航其實就是通過Javascript腳本語言控制導航的兩種狀態，主要是對兩種狀態成立條件的判斷，明確了這些，實現起來就不會太難。
1、基礎頁面（HTML+CSS）
效果圖：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<!--頁面三要素-->
<title>JS實現懸浮導航</title>
<meta name="Keywords" content="關鍵詞">
<meta name="description" content="描述">
<style type="text/css">
*{margin: 0;padding: 0;}
#top{margin: 0 auto;width: 1000px;}
#navbg{background-color:#ff3399;width: 100%;height: 37px }
#navbg nav{width: 1000px;height:37px;margin: 0 auto}
#navbg nav a{color: #ffffff;font-size: 14px;font-family: 微軟雅黑;width: 160px;height: 37px;
display: block;float:left;text-decoration: none;text-align: center;line-height: 37px; }
#navbg nav a:hover{background:#e50065}
.scrollNav{position: fixed;left: 0;top: 0}//固定導航欄的css樣式
</style>
</head>
<body>
<div id="top"><img src="images/20170715125349.png" height="55" width="1000"/></div>
<div id="navbg">
<nav>
<a href="#">公司團隊</a>
<a href="#">科技前沿</a>
<a href="#">業務咨詢</a>
<a href="#">合作伙伴</a>
<a href="#">加入我們</a>
<a href="#">關於前端</a>
</nav>
</div>
<!--由於頁面主體部分沒有添加具體內容，滾動條顯示不出來，在這里使用換行使瀏覽器顯示滾動條-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
2、JS實現懸浮導航
代碼如下：(直接將JS代碼插入到HTML頁面中即可實現所述效果)
<script language="JavaScript" src="JQuery/jquery-3.2.1.js"></script>//調用JQuery框架
<script type="text/javascript">
$(document).ready(function () {
var topH=$("#top").height();//獲取頭部高度，top指導航欄上面的部分
var navbg=$("#navbg");//獲取導航欄對象
$(window).scroll(function () {
if($(window).scrollTop()>topH){//對比滾動的距離與導航欄上面部分的高度大小來動態添加css樣式
navbg.addClass("scrollNav")//對導航欄添加樣式
}else{
navbg.removeClass("scrollNav")//去掉導航欄添加的樣式
}
});
});
</script>
備注：
文章為本人原創 轉載請注明出處 文章難免會有紕漏之處 還望大家多多包含 如有意見或者建議可與本人聯系 本人QQ：2187093468（非誠請勿擾，加好友請備注在哪里看到的）
