實(shí)例：滾動(dòng)漸變導(dǎo)航欄
技術(shù)棧：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>滾動(dòng)漸變導(dǎo)航欄</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="#">車主服務(wù)</a></li>
<li><a href="#">科技創(chuàng)新</a></li>
<li><a href="#">奔馳天下</a></li>
<li><a href="#">預(yù)約品鑒</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】
/* 引入網(wǎng)絡(luò)字體（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{
/* 默認(rèn)最小高度：2屏 */
min-height: 200vh;
background-color: #000;
}
header{
/* 固定定位 */
position: fixed;
top: 0;
left: 0;
width: 100%;
/* 彈性布局 */
display: flex;
/* 將元素靠邊對(duì)齊 */
justify-content: space-between;
align-items: center;
padding: 40px 100px;
z-index: 1;
/* 動(dòng)畫過渡 */
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{
/* 相對(duì)定位 */
position: relative;
width: 100%;
height: 100vh;
background: url("../images/car1.jpg") no-repeat;
/* 保持原有尺寸比例，裁切長(zhǎng)邊 */
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
