利用intersectionobserver api实现页面元素的动态显示与隐藏
网页设计中，根据用户滚动操作动态控制页面元素的显示和隐藏，是提升用户体验的关键。本文将介绍一种常见且高效的实现方法：利用Intersection Observer API，实现类似头条、腾讯等网站的滚动效果——侧边栏固定元素（例如点赞、评论按钮）在用户滚动至页面底部附近时自动隐藏，提升视觉效果。
此方法的优势在于无需预先知晓页面内容高度。Intersection Observer API可实时监测目标元素是否进入或离开浏览器视窗。通过监控页面底部元素，当该元素进入视窗（用户滚动至底部附近）时，触发JS代码隐藏侧边栏元素；反之，则重新显示。
以下代码示例演示了如何使用Intersection Observer API实现此效果：
<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>
h1 { text-align: center; }
.text { margin-left: 100px; }
.left { position: sticky; left: 0; top: 10px; }
.end { margin-bottom: 100px; }
</style>
<h1>标题</h1>
<div class="left">滚动<br>到底<br>我就<br>不见了</div>
<div class="text">...(此处为大量测试文本)...</div>
<div class="end">当你看到我，<br>左边的文字就消失</div>
<script>
(function() {
const endEl = document.querySelector('.end');
const leftEl = document.querySelector('.left');
const obs = new IntersectionObserver((entries, observer) => {
if (entries[0].isIntersecting) {
leftEl.style.display = 'none';
} else {
leftEl.style.display = '';
}
}, {
rootMargin: '0px',
threshold: 0.1,
});
obs.observe(endEl);
})();
</script>
代码选取页面底部元素(.end)和侧边栏元素(.left)，使用Intersection Observer API监听底部元素是否进入视窗。isIntersecting属性判断元素是否与视窗相交，根据其值动态控制侧边栏元素的display属性，实现显示/隐藏效果。rootMargin和threshold属性可调整检测灵敏度。
通过此方法，无需依赖页面内容高度，即可实现灵活、高效的页面元素显示隐藏效果，优化用户交互体验。
