使用html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果
更新時(shí)間：2023年03月27日 15:56:47 作者：北極光之夜。
這篇文章主要介紹了使用html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果,鼠標(biāo)向下拖動(dòng)滾動(dòng)條的時(shí)候?qū)Ш綑跁?huì)隨著拖動(dòng)有一個(gè)漸變動(dòng)畫效果,非常的炫酷,快來學(xué)習(xí)一下如何制作吧
先看效果：
實(shí)現(xiàn)：
1.定義導(dǎo)航欄的文字標(biāo)簽：
<div class="tou">
<sapn class="logo"> 北極光。</sapn>
<ul class="biao">
<li><a href="#"><a href="#">主頁</a></li>
<li><a href="#">個(gè)人簡介</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">留言版</a></li>
<li><a href="#">友鏈</a></li>
</ul>
</div>
2.導(dǎo)航欄整體的樣式：
.tou{
position: fixed;
top: 0;
left: 0;
padding: 25px 100px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.5s;
}
transition 過渡效果
3.北極光這個(gè)logo的樣式：
.logo{
position: relative;
font-size: 22px;
font-weight: 900;
letter-spacing: 1px;
color: rgb(28, 36, 148);
}
letter-spacing:文字（字母）間距
4.給北極光logo定位一個(gè)圖片在文字左邊：
.logo::before{
content: '';
position: absolute;
left: -50px;
top: -15px;
width: 50px;
height: 50px;
background-image: url(logo.png);
background-size: 100%;
}
5.右邊導(dǎo)航標(biāo)簽的一些樣式，樣式等都不做詳細(xì)說明了，畢竟每個(gè)人的都不一樣~：
.biao{
position: relative;
display: flex;
justify-content: center;
align-content: center;
list-style: none;
}
.biao li{
position: relative;
}
.biao a{
position: relative;
margin: 0 10px;
font-size: 18px;
font-family: 'fangsong';
font-weight: bold;
color: rgb(28, 36, 148);
text-decoration: none;
}
6.當(dāng)頁面有滾動(dòng)后導(dǎo)航欄的樣式，padding上下變小，字體顏色變，有了藍(lán)背景色：
.bian{
padding: 15px 100px;
background-color: rgb(71, 105, 219);
}
.bian .logo,.tou.bian a{
color: rgb(252, 247, 247);
}
7.簡單js，實(shí)現(xiàn)部分：
第一種：
window.addEventListener('scroll',function(){
let tou = document.querySelector('.tou');
if(window.scrollY>0)
{
tou.classList.add("bian");
}else{
tou.classList.remove("bian");
}
})
第二種：直接這樣：
window.addEventListener('scroll',function(){
let tou = document.querySelector('.tou');
tou.classList.toggle("bian",window.scrollY>0);
})
解釋：
scrollY屬性：
Window接口的只讀scrollY屬性返回文檔當(dāng)前垂直滾動(dòng)的像素?cái)?shù)。
classList屬性：
add(class1, class2, …) 在元素中添加一個(gè)或多個(gè)類名。如果指定的類名已存在，則不會(huì)添加；
remove(class1, class2, …) 移除元素中一個(gè)或多個(gè)類名。
toggle(class, true|false) 第一個(gè)參數(shù)為如果已存在類名則中移除的類名，并返回 false。如果該類名不存在則會(huì)在元素中添加類名，并返回 true。第二個(gè)是可選參數(shù)，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類，不管該類名是否存在。
所以：
第一種js寫法就是有滾動(dòng)>0時(shí)就添加類.biao而實(shí)現(xiàn)漸變效果，當(dāng)滾動(dòng)<=0時(shí)就移除.biao類回到原來；
第二種就是布爾值判斷，當(dāng)滾動(dòng)>0就強(qiáng)制添加.biao類，當(dāng)滾動(dòng)<=0就移除.biao類；
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 200vh;
}
.tou{
position: fixed;
top: 0;
left: 0;
padding: 25px 100px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.5s;
}
.logo{
position: relative;
font-size: 22px;
font-weight: 900;
letter-spacing: 1px;
color: rgb(28, 36, 148);
}
.logo::before{
content: '';
position: absolute;
left: -50px;
top: -15px;
width: 50px;
height: 50px;
background-image: url(logo.png);
background-size: 100%;
}
.biao{
position: relative;
display: flex;
justify-content: center;
align-content: center;
list-style: none;
}
.biao li{
position: relative;
}
.biao a{
position: relative;
margin: 0 10px;
font-size: 18px;
font-family: 'fangsong';
font-weight: bold;
color: rgb(28, 36, 148);
text-decoration: none;
}
.bian{
padding: 15px 100px;
background-color: rgb(71, 105, 219);
}
.bian .logo,.tou.bian a{
color: rgb(252, 247, 247);
}
/* 背景圖樣式 */
.bjimg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 1000px;
z-index: -10;
zoom: 1;
background-color: #fff;
background-image: url(11.jpg) ;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<!-- 背景圖 -->
<div class="bjimg"></div>
<!-- 導(dǎo)航欄 -->
<div class="tou">
<sapn class="logo"> 北極光。</sapn>
<ul class="biao">
<li><a href="#"><a href="#">主頁</a></li>
<li><a href="#">個(gè)人簡介</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">留言版</a></li>
<li><a href="#">友鏈</a></li>
</ul>
</div>
<script>
window.addEventListener('scroll',function(){
let tou = document.querySelector('.tou');
/* tou.classList.toggle("bian",window.scrollY>0); */
if(window.scrollY>0)
{
tou.classList.add("bian");
}else{
tou.classList.remove("bian");
}
})
</script>
</body>
</html>
到此這篇關(guān)于使用html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)漸變效果的文章就介紹到這了,更多相關(guān)html+css+js導(dǎo)航欄滾動(dòng)漸變內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
仿新浪微博首頁“大家正在說”漸入輪顯效果，有淡入淡出的效果，新內(nèi)容漸漸滾出來，老內(nèi)容慢慢滾動(dòng)下去，貌似很新奇的一種方式，從新浪微博獲得。2010-10-10
二級(jí)樹形菜單示例：CSS TreeMenu ，非常漂亮的樹形菜單，用在網(wǎng)站右側(cè)比較合適。2010-11-11
仿126中的綠色tab切換效果，比較漂亮2008-09-09
純js實(shí)現(xiàn)的三級(jí)下拉菜單效果的代碼，需要的朋友可以參考下。2011-05-05
js之類似tab的實(shí)現(xiàn)，之前已經(jīng)發(fā)布了很多，需要的朋友多看看。2009-12-12
javascript實(shí)現(xiàn)表現(xiàn)、結(jié)構(gòu)、行為分離的選項(xiàng)卡效果！
javascript實(shí)現(xiàn)表現(xiàn)、結(jié)構(gòu)、行為分離的選項(xiàng)卡效果！...2007-05-05
帶緩沖的 收縮與展開內(nèi)容效果...2007-09-09
超級(jí)susymenu實(shí)現(xiàn)top菜單
超級(jí)susymenu實(shí)現(xiàn)top菜單...2007-09-09
javascript 定時(shí)自動(dòng)切換的選項(xiàng)卡Tab
JavaScript配合CSS制作一個(gè)能自動(dòng) 切換的網(wǎng)頁選項(xiàng)卡,每隔一段時(shí)間,它就自動(dòng)切換選項(xiàng)卡列表和標(biāo)題,時(shí)間自設(shè).2009-10-10
JavaScript結(jié)合 CSS完成QQ聊天面板菜單的功能，點(diǎn)擊某一項(xiàng)菜單后，開始展開，再次點(diǎn)擊則關(guān)閉，支持多級(jí)（三級(jí)），代碼中預(yù)留有用于修飾的背景圖像代碼，請(qǐng)根據(jù)你的實(shí)際需要補(bǔ)全，應(yīng)該是非常實(shí)用的。2009-10-10