<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 40px;
background: pink;
}
main {
width: 100%;
height: 4500px;
background: cadetblue;
position: relative;
}
.wrap-box {
position: fixed;
top: 40%;
right: 0;
background: rgb(226, 168, 75);
}
.wrap-box p {
padding: 20px;
border-bottom: 1px solid #ccc;
}
.active {
color: red;
}
</style>
</head>
<body>
<header>header</header>
<main>
<div class="wrap-box">
<p>ts</p>
<p>pinia</p>
<p>vite</p>
</div>
<section style="height: 1500px; background: #4066bf;">ts</section>
<section style="height: 1500px; background: #9aae44;">pinia</section>
<section style="height: 1500px; background: #ce3db6;">vite</section>
</main>
</body>
</html>
<script src="./lodash.min.js"></script>
<script>
// 保证资源家在完毕,高度已经撑开
window.onload = () => {
document.addEventListener('scroll', _.throttle(function () {
// 获取文档滚动高度
let top = document.documentElement.scrollTop;
const nodeList = document.querySelectorAll('p');
nodeList.forEach(item => {
item.classList.remove('active');
if (top < 1540) {
nodeList[0].classList.add('active');
} else if (top >= 1540 && top < 3040) {
nodeList[1].classList.add('active');
} else if (top >= 3040) {
nodeList[2].classList.add('active');
}
})
}, 1000));
}
</script>
27. js - Throttling Case 2: Use throttling to control page scrolling frequency
Guess you like
Origin blog.csdn.net/EchoLiner/article/details/131082724
Recommended
Ranking