实例：滚动渐变导航栏
技术栈：HTML+CSS+JS
效果：
源码：
【html】【js】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>滚动渐变导航栏</title>
<link rel="stylesheet" href="../css/86.css">
</head>
<body>
<header>
<a href="#" class="logo">Logo</a>
<ul>
<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>
</ul>
</header>
<section class="banner1"></section>
<section class="banner2"></section>
<script>
window.addEventListener("scroll",()=>{
let header=document.querySelector("header");
header.classList.toggle("sticky",window.scrollY>0);
})
</script>
</body>
</html>
【css】
/* 引入网络字体（Poppins） */
@import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
*{
/* 初始化 */
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
body{
/* 默认最小高度：2屏 */
min-height: 200vh;
background-color: #000;
}
header{
/* 固定定位 */
position: fixed;
top: 0;
left: 0;
width: 100%;
/* 弹性布局 */
display: flex;
/* 将元素靠边对齐 */
justify-content: space-between;
align-items: center;
padding: 40px 100px;
z-index: 1;
/* 动画过渡 */
transition: 0.6s;
}
header .logo{
font-size: 32px;
font-weight: 700;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li{
list-style: none;
}
header ul li a{
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
transition: 0.6s;
}
.banner1{
/* 相对定位 */
position: relative;
width: 100%;
height: 100vh;
background: url("../images/car1.jpg") no-repeat;
/* 保持原有尺寸比例，裁切长边 */
background-size: cover;
/* 图片定位正中间 */
background-position: center center;
}
.banner2{
position: relative;
width: 100%;
height: 100vh;
background: url("../images/car2.jpg") no-repeat;
background-size: cover;
background-position: center center;
}
header.sticky{
padding: 6px 100px;
background-color: #fff;
}
header.sticky .logo,
header.sticky ul li a{
color: #000;
}
【图片素材】
https://www.aliyundrive.com/s/542SW1jVZHy
https://www.aliyundrive.com/s/gfQSJKg1xUH
