使用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)畫(huà)效果,非常的炫酷,快來(lái)學(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="#">主頁(yè)</a></li>
<li><a href="#">個(gè)人簡(jiǎn)介</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 過(guò)渡效果
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ì)說(shuō)明了，畢竟每個(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)頁(yè)面有滾動(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.簡(jiǎn)單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);
})
解釋?zhuān)?/strong>
scrollY屬性：
Window接口的只讀scrollY屬性返回文檔當(dāng)前垂直滾動(dòng)的像素?cái)?shù)。
classList屬性：
add(class1, class2, …) 在元素中添加一個(gè)或多個(gè)類(lèi)名。如果指定的類(lèi)名已存在，則不會(huì)添加；
remove(class1, class2, …) 移除元素中一個(gè)或多個(gè)類(lèi)名。
toggle(class, true|false) 第一個(gè)參數(shù)為如果已存在類(lèi)名則中移除的類(lèi)名，并返回 false。如果該類(lèi)名不存在則會(huì)在元素中添加類(lèi)名，并返回 true。第二個(gè)是可選參數(shù)，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類(lèi)，不管該類(lèi)名是否存在。
所以：
第一種js寫(xiě)法就是有滾動(dòng)>0時(shí)就添加類(lèi).biao而實(shí)現(xiàn)漸變效果，當(dāng)滾動(dòng)<=0時(shí)就移除.biao類(lèi)回到原來(lái)；
第二種就是布爾值判斷，當(dāng)滾動(dòng)>0就強(qiáng)制添加.biao類(lèi)，當(dāng)滾動(dòng)<=0就移除.biao類(lèi)；
完整代碼：
<!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="#">主頁(yè)</a></li>
<li><a href="#">個(gè)人簡(jiǎn)介</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)文章
js+css實(shí)現(xiàn)的簡(jiǎn)單的下來(lái)菜單。兼容性好。2009-05-05
2008-05-05
看到一個(gè)簡(jiǎn)單的菜單樣式，由于是作者比較早的作品，視覺(jué)效果不太好，有點(diǎn)突兀自己做了一點(diǎn)小修改，模仿icon動(dòng)畫(huà)的效果(區(qū)別的關(guān)鍵點(diǎn)是getStyle取得當(dāng)前計(jì)算樣式這個(gè)函數(shù))2010-12-12
JavaScript 下拉菜單實(shí)現(xiàn)代碼
利用css+js實(shí)現(xiàn)的下拉菜單。通過(guò)getElementsByTagName獲取ul,隱藏顯示。2009-05-05
javascript 垂直彈性菜單2008-12-12
javascript漸變顯示的雅虎中國(guó)選項(xiàng)卡效果代碼
javascript漸變顯示的雅虎中國(guó)選項(xiàng)卡效果代碼...2007-10-10
JavaScript多級(jí)下拉菜單代碼(簡(jiǎn)單實(shí)用)
JavaScript下拉菜單實(shí)現(xiàn)代碼，js與css的良好結(jié)合。喜歡的朋友可以測(cè)試下。2010-06-06
JavaScript結(jié)合 CSS完成QQ聊天面板菜單的功能，點(diǎn)擊某一項(xiàng)菜單后，開(kāi)始展開(kāi)，再次點(diǎn)擊則關(guān)閉，支持多級(jí)（三級(jí)），代碼中預(yù)留有用于修飾的背景圖像代碼，請(qǐng)根據(jù)你的實(shí)際需要補(bǔ)全，應(yīng)該是非常實(shí)用的。2009-10-10
可折疊展開(kāi)的簡(jiǎn)單目錄實(shí)現(xiàn)代碼
簡(jiǎn)單的目錄，展開(kāi)菜單，鼠標(biāo)點(diǎn)擊即可展開(kāi)，再次點(diǎn)擊即可合攏，類(lèi)似樹(shù)形菜單的功能，在瀏覽網(wǎng)頁(yè)時(shí)會(huì)見(jiàn)很多，不多做介紹了，需要的朋友可以參考下2012-12-12
jquery 實(shí)現(xiàn)斜導(dǎo)航效果
jquery 實(shí)現(xiàn)斜導(dǎo)航效果代碼，就一個(gè)圖片文件，利用css控制位置，非常不錯(cuò)。2009-05-05