JS实现悬浮导航的制作（附源码）--web前端
Posted Thanlon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现悬浮导航的制作（附源码）--web前端相关的知识，希望对你有一定的参考价值。
思想：导航在这里只有两种状态，一种是初始状态、一种是固定布局状态。实现悬浮导航其实就是通过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前端的主要内容，如果未能解决你的问题，请参考以下文章