溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JS如何實現導航欄樓層特效，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
知識點
1.多個事件有沖突的時候，需要設置flag判斷是什么事件，進而進行后續操作。
2.樓層效果就是判斷scrollTop和offsetTop的關系
3.引入工具庫工具庫
運行效果
導航與界面實現互動
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;list-style: none;border:0;}
html, body, ul{width: 100%;height: 100%;}
#ul li{
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
/*background-color: red;*/
color: #fff;
}
#ol{
width: 80px;
background-color: #ccc;
position: fixed;
left: 50px;
top: 200px;
border: 1px solid #fff;
}
#ol li{
text-align: center;
line-height: 30px;
border-bottom: 1px solid #fff;
color: #fff;
cursor: pointer;
}
#ol li.current{
background-color: orangered;
}
</style>
</head>
<body>
<!--導航-->
<ol id="ol">
<li class="current">第1層</li>
<li>第2層</li>
<li>第3層</li>
<li>第4層</li>
<li>第5層</li>
</ol>
<!--樓層-->
<ul id="ul">
<li>第1層內容</li>
<li>第2層內容</li>
<li>第3層內容</li>
<li>第4層內容</li>
<li>第5層內容</li>
</ul>
<script src="../../00MyTools/MyTools.js"></script>
<script>
window.addEventListener('load', function (ev) {
// 1. 獲取標簽
var ol = myTool.$('ol'), ul = myTool.$('ul');
var ulLis = ul.children;
var olLis = ol.children;
// 是否是點擊產生的滾動
var isClick = false;
// 2. 上色
var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
for (var i = 0; i < colorArr.length; i++) {
ulLis[i].style.backgroundColor = colorArr[i];
}
// 3. 監聽導航點擊
for (var j = 0; j < olLis.length; j++) {
var olLi = olLis[j];
(function (index) {
olLi.addEventListener('click', function () {
isClick = true;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = '';
}
this.className = 'current';
// document.documentElement.scrollTop = index * myTool.client().height;
myTool.slowMoving(document.documentElement, {'scrollTop': index * myTool.client().height}, function () {
isClick = false;
});
});
})(j)
}
// 4. 監聽滾動
var roll = 0;
window.addEventListener('scroll', function (ev1) {
if(!isClick){
// 4.1 獲取頭部滾動偏移的高度
roll = Math.ceil(Number(myTool.scroll().top));
// 4.2 遍歷
for (var i = 0; i < ulLis.length; i++) {
// 4.3 判斷
if(roll >= ulLis[i].offsetTop){
for (var j = 0; j < olLis.length; j++) {
olLis[j].className = '';
}
olLis[i].className = 'current';
}
}
}
})
});
</script>
</body>
</html>關于“JS如何實現導航欄樓層特效”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
