大家好，今天给大家分享一篇用html+css+js实现阴阳师吸顶导航的代码。
参考博主 快餐只吃金拱门
如有侵权还请速速联系！！！
1，案例效果
2，HTMLl部分,
这里使用无序列表ul嵌套a标签来书写导航。
<div class="yys">
<div class="header">
<div class="menu">
游戏全目录
</div>
<a href="#">
<img src="img/wangyi.png">
</a>
<div class="sale">
25元专属券限时领！
</div>
</div>
<div class="banner">
<div id="reference">
<div id="nav" class="nav">
<div class="nav-wrap">
<ul>
<li class="nav-active"><a href="#">官网首页</a></li>
<li>
<a href="#">新闻资讯</a>
</li>
<li><a href="#">武神录</a></li>
<li><a href="#">游戏攻略</a></li>
<li><a href="#">大社区</a></li>
<li><a href="#">泛娱乐</a></li>
<li><a href="#">视听中心</a></li>
<li><a href="#">主题站</a></li>
<li><a href="#">周边商城</a></li>
<li><a href="#">藏宝阁</a></li>
<li><a href="#">官方渠道</a></li>
<li><a href="#">IP新游预约</a></li>
<li><a href="#">福利总换</a></li>
<li><a href="#">系统转移</a></li>
</ul>
<div class="search"></div>
</div>
</div>
</div>
<div class="banner-box">
<img src="img/banner-box.png" >
</div>
</div>
</div>
3，CSS部分
/* 重置样式 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center;}
li{list-style-type: none;}
a{text-decoration: none; color: #333;}
.clear::after{
content: "";
display: block;
clear: both;
}
/* 样式开始 */
/* 为js添加样式做准备
position:fixed
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
top:0
固定导航条的位置
*/
.fix{
position: fixed;
top: 0;
}
/* 固定宽度防止，使用position:fixed;后失去原有的位置 */
#reference{
height: 60px;
}
/* 最外层容器开始 */
.yys{
width: 100%;
max-width: 1920px;
min-width: 1280px;
/* 自动找高 */
overflow: hidden;
}
/* 最外层容器结束 */
/* 头部样式开始 */
.header{
position: relative;
width: 100%;
height: 55px;
/* 一行文字垂直居中 */
line-height: 55px;
}
.header img{
margin-top: 5px;
}
.menu{
position: absolute;
top: 0;
left: 0;
width: 179px;
height: 54px;
background-color: #cf1132;
font-size: 12px;
color: #ffffff;
}
.sale{
position: absolute;
top: 0;
right: 0;
width: 138px;
border-left: 1px solid #dadada;
height: 54px;
color: #333333;
font-size: 12px;
/* 修改光标为小手 */
cursor: pointer;
}
.sale:hover{
color: #bc2e2e;
border-bottom: 1px solid red;
background-color: #f3f3f3;
}
/* 头部样式结束 */
/* banner样式开始 */
.banner{
width: 100%;
height: 884px;
}
.nav{
position: relative;
width: 100%;
height: 60px;
background: url("../img/nav.jpg") no-repeat center top;
}
.nav-wrap{
position: relative;
width: 1180px;
height: 70px;
margin: 0 auto;
line-height: 70px;
}
.nav-wrap li{
float: left;
width: 84.28px;
font-size: 14px;
}
.nav-wrap a{
color: #FFFFFF;
transition: all 0.2s;
}
.nav-active{
background: url(../img/nav_bg.jpg) 0 0 no-repeat;
}
.nav-active>a{
color: #000000;
}
.nav-wrap li:hover{
background: url(../img/nav_bg.jpg) 0 0 no-repeat;
}
/* 鼠标悬停在li上,它的儿子a,字体颜色变为黑色 */
.nav-wrap li:hover>a{
color: #000000;
}
/* 放大镜 */
.search{
/* 相对于nav-wrap定位 */
position: absolute;
top: 25px;
right: -35px;
width: 18px;
height: 19px;
background: url(../img/search1.png) no-repeat;
transition: all 0.2s;
}
.search:hover{
transform: rotateY(
180deg
);
}
.banner-box{
width: 100%;
height: 784px;
}
.banner-box>img{
margin-top: -10px;
}
/* banner样式结束 */
/* 样式结束 */
4，js部分
这里主要用到了js中getBoundingClientRect()方法和onscroll事件来实现
通过getBoundingClientRect()来获取导航距离顶部的距离
如果距离小于等于0，则通过add()方法给导航添加.fix样式，否则则通过remove()去掉.fix样式。
classLast.add()在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加.
var reference = document.getElementById('reference');
var nav = document.getElementById('nav');
document.addEventListener('scroll',function(){
var distance = reference.getBoundingClientRect().top;
if(distance<=0){
nav.classList.add('fix');
}else{
nav.classList.remove('fix');
}
})
每天记录一个前段小案例！！！！
