使用html+css+js實現(xiàn)導航欄滾動漸變效果
更新時間：2023年03月27日 15:56:47 作者：北極光之夜。
這篇文章主要介紹了使用html+css+js實現(xiàn)導航欄滾動漸變效果,鼠標向下拖動滾動條的時候導航欄會隨著拖動有一個漸變動畫效果,非常的炫酷,快來學習一下如何制作吧
先看效果：
實現(xiàn)：
1.定義導航欄的文字標簽：
<div class="tou">
<sapn class="logo"> 北極光。</sapn>
<ul class="biao">
<li><a href="#"><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>
</div>
2.導航欄整體的樣式：
.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.北極光這個logo的樣式：
.logo{
position: relative;
font-size: 22px;
font-weight: 900;
letter-spacing: 1px;
color: rgb(28, 36, 148);
}
letter-spacing:文字（字母）間距
4.給北極光logo定位一個圖片在文字左邊：
.logo::before{
content: '';
position: absolute;
left: -50px;
top: -15px;
width: 50px;
height: 50px;
background-image: url(logo.png);
background-size: 100%;
}
5.右邊導航標簽的一些樣式，樣式等都不做詳細說明了，畢竟每個人的都不一樣~：
.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.當頁面有滾動后導航欄的樣式，padding上下變小，字體顏色變，有了藍背景色：
.bian{
padding: 15px 100px;
background-color: rgb(71, 105, 219);
}
.bian .logo,.tou.bian a{
color: rgb(252, 247, 247);
}
7.簡單js，實現(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屬性返回文檔當前垂直滾動的像素數(shù)。
classList屬性：
add(class1, class2, …) 在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加；
remove(class1, class2, …) 移除元素中一個或多個類名。
toggle(class, true|false) 第一個參數(shù)為如果已存在類名則中移除的類名，并返回 false。如果該類名不存在則會在元素中添加類名，并返回 true。第二個是可選參數(shù)，是個布爾值用于設置元素是否強制添加或移除類，不管該類名是否存在。
所以：
第一種js寫法就是有滾動>0時就添加類.biao而實現(xiàn)漸變效果，當滾動<=0時就移除.biao類回到原來；
第二種就是布爾值判斷，當滾動>0就強制添加.biao類，當滾動<=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>
<!-- 導航欄 -->
<div class="tou">
<sapn class="logo"> 北極光。</sapn>
<ul class="biao">
<li><a href="#"><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>
</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>
到此這篇關于使用html+css+js實現(xiàn)導航欄滾動漸變效果的文章就介紹到這了,更多相關html+css+js導航欄滾動漸變內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
js+css實現(xiàn)的簡單的下來菜單。兼容性好。2009-05-05
2008-05-05
看到一個簡單的菜單樣式，由于是作者比較早的作品，視覺效果不太好，有點突兀自己做了一點小修改，模仿icon動畫的效果(區(qū)別的關鍵點是getStyle取得當前計算樣式這個函數(shù))2010-12-12
利用css+js實現(xiàn)的下拉菜單。通過getElementsByTagName獲取ul,隱藏顯示。2009-05-05
javascript 垂直彈性菜單2008-12-12
javascript漸變顯示的雅虎中國選項卡效果代碼...2007-10-10
JavaScript下拉菜單實現(xiàn)代碼，js與css的良好結合。喜歡的朋友可以測試下。2010-06-06
JavaScript結合 CSS完成QQ聊天面板菜單的功能，點擊某一項菜單后，開始展開，再次點擊則關閉，支持多級（三級），代碼中預留有用于修飾的背景圖像代碼，請根據(jù)你的實際需要補全，應該是非常實用的。2009-10-10
簡單的目錄，展開菜單，鼠標點擊即可展開，再次點擊即可合攏，類似樹形菜單的功能，在瀏覽網(wǎng)頁時會見很多，不多做介紹了，需要的朋友可以參考下2012-12-12
jquery 實現(xiàn)斜導航效果代碼，就一個圖片文件，利用css控制位置，非常不錯。2009-05-05