
如何在网页中实现内容滚动到底部时侧边栏元素消失的技术
问题描述:
文中提到了一个技术,当页面向下滚动时,侧边栏上的元素会消失,当滚动到顶部时,侧边栏元素又会重新出现,这种技术令人印象深刻。
技术实现:
针对这个问题,可以使用 Intersection Observer API 来实现。该 API 可以监听元素是否出现在屏幕可视范围内,并根据元素的可见状态来触发事件。具体实现步骤如下:
- 首先在 HTML 中定义左侧的浮动元素(此处称为 leftEl),以及作为触发点的底部元素(此处称为 endEl)。
- 使用 Intersection Observer 监听 endEl 元素是否出现在屏幕可视范围内。
- 当 endEl 出现在可视范围内时,执行回调函数来隐藏 leftEl 元素。
- 当 endEl 消失在可视范围内时,执行回调函数来显示 leftEl 元素。
代码示例:
(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);
})();优点:
这种技术的主要优点是,它不需要知道文章内容的高度即可实现侧边栏元素的消失和显示,而且能够响应式地适应不同的设备和屏幕尺寸。










