JS實現懸浮導航的制作（附源碼）--web前端
阿新 • • 發佈：2017-07-15
pla char 控制 pos top -c 在哪裏 -a meta
思想：導航在這裏只有兩種狀態，一種是初始狀態、一種是固定布局狀態。實現懸浮導航其實就是通過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>
源碼：JS實現懸浮導航制作.zip
備註：
文章為本人原創 轉載請註明出處 文章難免會有紕漏之處 還望大家多多包含 如有意見或者建議可與本人聯系 本人QQ：2187093468（非誠請勿擾，加好友請備註在哪裏看到的）
JS實現懸浮導航的制作（附源碼）--web前端