<html>
<head>
<title>实现多个标题的吸顶</title>
</head>
<body>
<ul id="container">
<h1>实现多个标题的吸顶</h1>
<section>
<div class="box">header1</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</section>
<!--设置多个如header1的子列表,窗口可以进行滚动,此处省略-->
<section>
<div class="box">header2</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</section>
<section>
<div class="box">header3</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</section>
<section>
<div class="box">header4</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</section>
<section>
<div class="box">header5</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</section>
<section>
<div class="box">header6</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</section>
<section>
<div class="box">header7</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</section>
</ul>
</body>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
width: 100%;
}
li {
width: 200px;
color: white;
margin: 10px;
list-style: none;
border-radius: 5px;
border: 1px solid #191970;
background: #4169e1;
text-align: center;
}
div {
width: 100%;
height: 30px;
color: white;
padding-left: 20px;
background: #dc143c;
}
.box1 {
position: fixed;
top: 0;
}
</style>
<script type="text/javascript">
var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
section = document.getElementsByTagName('section') //获取所有子列表
var ot = [], //存储每个标题的offsetTop
len = box.length //标题的个数
for (let i = 0; i < len; i++) {
ot.push(box[i].offsetTop) //获取每个标题的offsetTop
}
//获取最后一个子列表的高度,为了设置最后一个吸顶标题的位置
//section[len-1].getBoundingClientRect().height
//此方法返回一个number
ot.push(
box[len - 1].offsetTop + section[len - 1].getBoundingClientRect().height
)
window.onscroll = function() {
//获取滚动的高度
var st = document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < len; i++) {
if (st > ot[i] && st < ot[i + 1]) {
//滚动时监听位置,为标题的吸顶设置一个现实范围
box[i].className = 'box box1'
} else {
box[i].className = 'box'
}
}
}
</script>
</html>
实现多个标题的吸顶
最新推荐文章于 2023-02-04 21:54:42 发布