前言
在上一篇文章中( 粘性定位之CSS ( position: sticky )实现),我们已经知道如何使用CSS中的position: sticky
来实现粘性定位,这篇文章,我们来学习一下如何利用JavaScript来实现一个简单的粘性定位。
JavaScript实现粘性定位
步骤
- 获取滚动位置:使用 JavaScript 监听滚动事件,获取页面滚动的位置。
- 检查条件:在滚动事件的处理函数中,对滚动位置进行判断,确定是否需要将元素设为粘性定位。这个判断通常是基于容器元素的位置或页面滚动的位置。
- 动态改变样式 :如果满足条件,通过修改元素的 CSS 样式,例如改变
position
或top
属性,来使元素表现为粘性布局。
注意事项
- 考虑性能问题,避免在滚动事件处理中执行过多计算或操作,以减少页面的负担。
- 谨慎选择粘性布局的元素,避免过度使用,影响页面的整体布局和美观性。
- 在实现粘性布局时,要注意页面的可访问性,确保元素位置的改变不会影响用户对页面内容的正常访问和阅读。
- 测试不同设备和浏览器下的表现,确保粘性布局在各种情况下都能正常工作。
如下示例:
html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> // 引入lodash库
<style>
body {
height: 2000px;
}
.nav {
text-align: center;
}
ul {
list-style: none;
}
li {
height: 50px;
line-height: 50px;
}
.title {
background-color: red;
width: 100%;
}
</style>
</head>
<body>
<div class="nav">
<span>头部</span>
</div>
<div class="content">
<ul>
<li class="box"></li>
<li class="title">内容</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<script>
const title = document.querySelector('.title');
const box = document.querySelector('.box');
box.style.display = 'none';
window.addEventListener('scroll', _.throttle(function () {
const containerTop = window.scrollY || window.pageYOffset;
console.log(containerTop);
if (containerTop >= 44) {
title.style.position = 'fixed'
title.style.top = '0'
} else {
title.style.position = '';
title.style.top = '44'
}
box.style.display = containerTop >= 44 ? 'block' : 'none';
}, 100)); // 设置节流时间为 100ms 性能优化
</script>
</body>
</html>
效果图
滚动之前 滚动之后,内容固定在顶部