什么是樓梯特效？
如果各大網(wǎng)站點擊按鈕本頁面跳轉對應的板塊的功能就是樓梯效果
UTOOLS1588058562130.png
思路
大家可以看到左側的按鈕和右側的內容板塊是一一對應的，所以我們需要知道右側每個板塊在當前頁面的位置在可以通過左側的樓梯去控制右側的板塊內容的跳轉。試想，右側每一個板塊都會距離頁面頂端距離，只需要點擊左側按鈕讓對應位置的樓梯跳轉到對應板塊的高度位置即可。接下來具體代碼實現(xiàn).
js核心代碼
// 梯子對象
function Stairs(options) {
this.options = options;
this.init();
}
Stairs.prototype = {
constructor: Stairs,
init: function () {
// 計算每一個內容元素的高度的數(shù)組
this.content_ele_offset_top_list = [];
// 獲取元素的偏移量
$(this.options.content_selector).offset(function (index, cords) {
// 將每一個元素的高度值放入發(fā)哦度列表之中
this.content_ele_offset_top_list.push(cords.top);
return cords;
}.bind(this));
// 計算最小高和最大高
let _length = this.content_ele_offset_top_list.length;
this.min_top = this.content_ele_offset_top_list[0];
this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
// 同樣我們吧這個最高的值放入數(shù)組中之后的計算需要使用
this.content_ele_offset_top_list.push(this.max_top);
// 每一次頁面刷新的時候需要先計算一下梯子的位置
// 獲得數(shù)據(jù)
let scrollTop = $("body, html").scrollTop();
// 計算下標
this.calcStairsIndex(scrollTop);
this.bindEvent();
},
bindEvent: function () {
let $body_html = $("body,html");
let instance = this;
// 滾動事件監(jiān)聽
// 函數(shù)節(jié)流的變量
let t = null;
$(document).scroll(function () {
if (typeof t === "number") {
return false;
}
t = setTimeout(() => {
t = null;
// 獲得數(shù)據(jù)
let scrollTop = $body_html.scrollTop();
// 計算下標
this.calcStairsIndex(scrollTop);
}, 200)
}.bind(this));
// 點擊右側樓梯的我們需要滾動至對應的位置 綁定事件
$(this.options.stairs_selector).click(function () {
// 先得到點擊事件元素在數(shù)組中的下標 通過這個下標找到對應的板塊
let index = $(this).index(instance.options.stairs_selector);
instance.changeStairsIndex(index);
})
},
calcStairsIndex: function (st) {
// 如果小于最小的高度和最大的高度我們直接結束下面的函數(shù)
if (st < this.min_top || st > this.max_top) {
this.index = -1;
this.changeStairsBtn();
return false;
}
let _list = this.content_ele_offset_top_list;
// 數(shù)據(jù)一直在這個范圍之內我們就不在重復計算了
if (st >= _list[this.index] && st < _list[this.index + 1]) {
return false;
}
// 遍歷記錄滾入的樓梯的下標
for (let i = 0; i < _list.length; i++) {
if (st >= _list[i] && st < _list[i + 1]) {
this.index = i;
break;
}
}
this.changeStairsBtn();
},
/**
* 改變梯子的選中狀態(tài)
*/
changeStairsBtn: function () {
if (this.index === -1) {
$(this.options.stairs_selector).removeClass("cur");
return false;
}
// 如果不熟index===-1 說明要選中對應下標的樓梯
$(this.options.stairs_selector).eq(this.index).addClass("cur").siblings().removeClass("cur");
},
/**
* 改變梯子選中的下標的
* @param {點擊的梯子的下標} index
*/
changeStairsIndex: function (index) {
// 通過這個index我們去scroll對應的板塊
$("body,html").scrollTop(this.content_ele_offset_top_list[index]);
$(document).trigger("scroll");
}
}
html+css代碼
<!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>
.container {
width: 900px;
margin: 200px auto;
position: relative;
}
.floor {
height: 900px;
background-color: aqua;
}
.f2 {
background-color: yellowgreen;
}
.f3 {
background-color: teal;
}
.f4 {
background-color: burlywood;
}
.stairs {
position: fixed;
top: 50%;
left: 13%;
width: 60px;
height: 100px;
margin-top: -50px;
border: 1px solid #eeeeee;
text-align: center;
cursor: pointer;
}
.stairs div {
padding: 5px 0;
}
.stairs .cur{
color: #ffffff;
background-color: #f10e30;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="floor f1">第一層樓梯</div>
<div class="floor f2">第二層樓梯</div>
<div class="floor f3">第三層樓梯</div>
<div class="floor f4">第四層樓梯</div>
<div class="stairs">
<div class="s cur">第一層</div>
<div class="s">第二層</div>
<div class="s">第三層</div>
<div class="s">第四層</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="./js/Stairs.js"></script>
<script>
$(function(){
new Stairs({
content_selector : ".floor", // 與樓梯對應的板塊盒子
stairs_selector : ".stairs .s" // 每一個樓梯
})
});
</script>
</body>
</html>
如何使用
首先我們需要引入jQuery代碼<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>,然后引入樓梯核心代碼的js文件<script src="./js/Stairs.js"></script>,調用對象
<script>
$(function(){
new Stairs({
content_selector : ".floor", // 與樓梯對應的板塊盒子
stairs_selector : ".stairs .s" // 每一個樓梯
})
});
</script>
