实现思路:通过js动态添加css和删除css以及设置过渡时间
1:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机</title>
<link rel="stylesheet" href="css/header.css" />
</head>
<body>
<!--导航头-->
<header class="header" id="header">
<div class="header_wrap">
<div class="header_logo">我的手机</div>
<nav class="header_nav">
<a href="javascript:void(0)" class="header_nav-item ">首页</a>
<a href="javascript:void(0)" class="header_nav-item">外观</a>
<a href="javascript:void(0)" class="header_nav-item">配置</a>
<a href="javascript:void(0)" class="header_nav-item">型号</a>
<a href="javascript:void(0)" class="header_nav-item header_nav-item_custom_button">说明</a>
</nav>
</div>
</header>
<div style="height: 1000px"></div>
<script type="text/javascript">
window.onscroll=function(){
var top=document.documentElement.scrollTop;
var heade=document.getElementById("header");
var items=document.getElementsByClassName("header_nav-item");//获取全部的eader_nav-item
// 通过JS为heade和全部的item加上和去除样式
if(top>70){//加上的样式
heade.classList.add("header_status_black");
for (var i = 0; i < items.length; i++) {
items[i].classList.add("item_color");
}
}else{//清除加上的样式
heade.classList.remove("header_status_black");
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("item_color");
}
}
}
</script>
</body>
</html>
2:header.css
/*!*BEM设计模式*!*/
/*模块:没有前缀,多个单词用-链接*/
/*元素:元素在模块之后,可以有多个层级,以_链接*/
/*修饰:某元素或者模块的特别的状态,必须有一个状态名和状态值,用_链接*/
body,h2,h3{
padding: 0;
margin: 0;
font-size: 12px;
font-family:"Songti SC";
}
a{
text-decoration: none;
}
/*导航头*/
.header{
background-color: #f7f7f7f7;
border: 1px solid red;
}
.header_wrap{
height: 80px;
width: 1200px;
position: relative;
border: 1px solid red;
margin: 0 auto;
}
.header_logo{
border: 1px solid red;
width: 150px;
height: 38px;
line-height: 38px;
text-indent: 50px;
font-size: 20px;
color: #07111b;
background: url("../img/logo.png") left center no-repeat;
position: absolute;
top: 50%;
margin-top: -19px;
left: 20px;
}
.header_nav{
position: absolute;
right: 20px;
height: 38px;
line-height: 38px;
top: 50%;
margin-top: -19px;
}
.header_nav-item{
color: #292f35;
font-size: 14px;
display: block;
height: 38px;
width: 60px;
float: left;
margin-left: 40px;
text-align: center;
}
.header_nav-item_custom_button{
background-color: #000;
color: #f4f4f5;
text-align: center;
width:60px;
border-radius: 3px;
}
/*动画----------------------------------------------*/
/*此样式通过js加载到.header+.header_status_black 上*/
.header_status_black{
/*添加动画过渡时间*/
transition: all 1s;
background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index:3;
}
/*此样式通过js加载到.header_nav-item+.item_color上*/
.item_color{
/*添加动画过渡时间*/
transition: all 2s;
color: #F4F4F5;
font-size: 17px;
}
3:效果图
导航条下拉,变黑,字体变大,有过渡时间