position: fixed“飘”是因父容器transform创建新包含块、z-index层级不足或Safari移动端兼容问题；应移除无意义transform、设足够z-index、用translateY(-50%)居中且不干扰参照系，并为Safari加-webkit-sticky降级。
为什么 position: fixed 在滚动时会“飘”出预期位置
常见错误是直接给社交栏加 position: fixed，却发现它没贴着浏览器视口边缘，或被其他元素遮挡、在移动端错位。根本原因不是 CSS 写错了，而是忽略了定位上下文和层叠顺序。
-
fixed的参照物是视口，但若父容器有transform、perspective或filter（哪怕只是transform: translateZ(0)），就会创建新的包含块，导致fixed相对于该容器而非视口 - 层级问题：没设
z-index，或设了但父容器的z-index更高，社交栏就被盖住了 - 移动端 Safari 对
fixed支持不稳定，尤其在地址栏收起/展开时会触发重排，造成“跳动”
怎么让固定栏真正“钉死”在页面右侧（含兼容处理）
关键不是堆属性，而是控制定位锚点和渲染行为。用纯 CSS 实现稳定垂直固定，重点在三点：脱离文档流、明确尺寸边界、规避 transform 干扰。
- 给社交栏设
position: fixed+top: 50%+right: 20px，再用transform: translateY(-50%)居中——注意这里transform是为了视觉居中，不是为了布局，所以不会影响fixed的参照系 - 必须显式设置
z-index: 1000（数值要足够大，避开框架默认值如 999） - 检查所有祖先元素，删掉无意义的
transform；如果必须用动画，改用top/right配合will-change: top - 为 Safari 加补丁：
@supports (-webkit-touch-callout: none) { .social-bar { position: -webkit-sticky; top: 50%; } }（仅作降级 fallback，不替代fixed）
滚动监听做动态显示/隐藏时，scroll 事件为什么卡顿
直接在 scroll 里调用 getBoundingClientRect() 或操作 DOM 类名，很容易触发强制同步布局（Layout Thrashing），尤其在低端安卓机上明显掉帧。
- 别在
scroll回调里读取offsetTop、clientHeight等会触发重排的属性 - 用
requestAnimationFrame节流：只在下一帧执行状态判断，避免高频计算 - 把需要比对的值（比如触发阈值）提前缓存为变量，而不是每次滚动都重新查
document.documentElement.scrollTop - 示例逻辑：
let ticking = false;<br>function updateBar() {<br> const scrollY = window.scrollY;<br> if (scrollY > 300) {<br> bar.classList.add('visible');<br> } else {<br> bar.classList.remove('visible');<br> }<br>}<br>window.addEventListener('scroll', () => {<br> if (!ticking) {<br> requestAnimationFrame(() => {<br> updateBar();<br> ticking = false;<br> });<br> ticking = true;<br> }<br>});
用 IntersectionObserver 替代 scroll 监听的适用边界
它确实更轻量，但不是万能替代。是否用它，取决于你关心的是“是否进入视口”，还是“滚动到某具体位置”。前者适合，后者不行。
立即学习“前端免费学习笔记（深入）”；
-
IntersectionObserver只能告诉你目标元素是否出现在视口内（或某比例），不能精确到像素级滚动偏移，比如“当页面滚过 800px 时显示按钮”这种需求它做不到 - 初始化时记得传
{ root: null, threshold: 0 }，否则默认root是document，但某些嵌套滚动容器下会失效 - 移动端兼容性没问题（Chrome 51+/Firefox 55+/Safari 12.1+），但 IE 完全不支持，需降级回
scroll+ 节流 - 别在
observe()前就销毁 observer 实例，容易漏掉首次回调；建议统一在组件卸载时调用unobserve()或disconnect()
img 标签硬塞进去，结果图片加载完成前高度为 0，fixed 后留出大片空白。这些细节不报错，但一上线就露馅。 
