position: sticky 无法实现滚动到底部自动隐藏，需用 IntersectionObserver 监听元素是否离开视口底部并切换 visibility；sticky 的 bottom: 0 仅触发贴底吸附，不控制显隐，且依赖父容器有明确高度和 overflow-y: auto。
position: sticky 本身做不到“滚动到底部时自动隐藏”——它只负责吸附，不控制显隐。真要实现这个效果，得换思路：用 IntersectionObserver 监听元素是否离开视口底部边界，再配合 CSS 切换 opacity 或 visibility。
为什么 sticky + bottom: 0 不会隐藏？
很多人试过给元素写 position: sticky; bottom: 0;，发现它滚到父容器底就“卡住不动”，但不会消失。这是因为 sticky 的行为逻辑是：当元素**底部即将触达滚动容器的下边界**时开始吸附；一旦整个元素滑出该容器的可滚动范围，它就退回到 normal 流——看起来像“掉下去了”，但实际只是脱离粘性，并非被隐藏。
关键点：
-
sticky没有内置显隐控制能力 - 它依赖父容器有明确高度 +
overflow-y: auto才能计算锚点 - 写
bottom: 0是让它“贴底吸附”，不是“到底隐藏”
用 IntersectionObserver 实现“底部消失”
这是目前最轻量、兼容性好（Chrome 51+、Firefox 55+、Safari 12.1+）、且不卡主线程的方案。核心是监听目标元素的 boundingClientRect.bottom 是否小于等于容器的 scrollHeight（或可视区域底部）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听目标元素（比如那个想隐藏的按钮），根容器设为父滚动容器（
root选项） -
threshold设为[0, 0.99]，避免因像素取整漏判 - 回调中检查
entry.isIntersecting === false且entry.boundingClientRect.bottom <= entry.rootBounds.bottom，才触发隐藏 - 推荐用
visibility: hidden而非display: none，避免重排
简短示例：
const target = document.querySelector('.footer-btn');
const container = document.querySelector('.wrap');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting &&
entry.boundingClientRect.bottom <= entry.rootBounds.bottom) {
entry.target.style.visibility = 'hidden';
} else {
entry.target.style.visibility = 'visible';
}
});
},
{
root: container,
threshold: [0, 0.99]
}
);
observer.observe(target);
别踩这些坑
常见翻车点集中在 DOM 结构和样式约束上：
- 父容器没设
max-height或height，只靠内容撑高 →IntersectionObserver的rootBounds会是null，监听失效 - 父容器用了
transform、filter或perspective→ 创建新层叠上下文，导致root绑定失败，必须改用document作为根或去掉这些属性 - 元素本身有
margin-bottom或padding-bottom→ 影响boundingClientRect计算，建议统一用box-sizing: border-box并显式归零测试 - 在 iOS Safari 旧版（≤15.4）中，
IntersectionObserver对root的支持不稳定 → 可降级为监听scroll事件 +getBoundingClientRect()，但需防抖
真正难的不是写几行 JS，而是确认父容器的滚动上下文是否干净、是否被其他 CSS 属性意外干扰。很多“不生效”问题，根源都在 root 没绑定对，而不是 Observer 本身写错了。
