悬浮球必须用 position: fixed 定位，推荐容器为 <div id="floating-ball">，CSS 设 right: 20px、bottom: 20px、z-index: 9999；菜单用 visibility+opacity 过渡避免抖动；滚动时用 requestAnimationFrame 节流并基于导航栏高度动态调整 bottom 值。
悬浮球 DOM 结构和基础定位怎么写？
必须用 position: fixed，否则滚动时会跟着内容跑。不要用 absolute 或 relative，它们依赖父容器或文档流，一滚动就失效。
- 悬浮球容器建议用
<div id="floating-ball"></div>，不推荐用<button>—— 语义不符，且默认样式难统一 - CSS 中设置
right: 20px和bottom: 20px是最稳妥的初始位置，避免遮挡右下角固定按钮（如客服入口） - 加
z-index: 9999，但别盲目设成999999—— 太高可能压住全屏弹窗、调试工具栏等
#floating-ball {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #409eff;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
z-index: 9999;
cursor: pointer;
}点击展开菜单时如何避免布局抖动？
常见错误是直接用 display: block/none 切换菜单，导致浏览器重排（reflow），尤其在低配设备上明显卡顿。
- 改用
visibility: hidden/visible+opacity: 0/1配合transition，只触发布局（layout）不变的重绘（paint） - 菜单容器必须用
position: fixed，且top/bottom/right值要和悬浮球对齐，否则出现偏移 - 不要用
transform: translateY()单独做下拉动画 —— 若菜单高度不固定，结束时无法准确判断是否展开完成
#floating-menu {
position: fixed;
right: 20px;
bottom: 80px;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s;
}怎么监听滚动并动态调整悬浮球位置？
有些页面顶部有吸顶导航栏，滚动后需要把悬浮球往下挪一点，避开遮挡。不能靠 window.onscroll 直接改 top —— 频繁触发会导致卡顿。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
getBoundingClientRect()获取导航栏高度，比硬编码top: 60px更可靠 - 使用
requestAnimationFrame节流，避免每帧都计算 - 只在滚动方向为“向下”且超过导航栏高度时才修改
bottom，向上滚动时恢复原值
let lastScrollTop = 0;
const navHeight = document.querySelector('.header')?.getBoundingClientRect().height || 0;
<p>window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const ball = document.getElementById('floating-ball');</p><p>if (scrollTop > lastScrollTop && scrollTop > navHeight) {
ball.style.bottom = '80px';
} else {
ball.style.bottom = '20px';
}
lastScrollTop = scrollTop;
});移动端点击区域太小怎么办？
56px × 56px 在手机上勉强够点，但 iOS Safari 的点击反馈延迟明显，用户常误以为没点中。
立即学习“前端免费学习笔记（深入）”；
- 给
#floating-ball加touch-action: manipulation，关闭双击缩放和长按菜单，提升响应感 - 实际可点击区域用伪元素扩展：比如加一个
::after，content: ""，position: absolute，宽高设为80px，z-index: -1 - 禁止在悬浮球上绑定
ontouchstart和onclick两个事件 —— 容易触发两次，用addEventListener('click', ...)即可，现代移动端 click 已足够快
真正麻烦的是兼容老版本微信内置浏览器（X5内核），它对 fixed 定位支持不稳定，有时会随页面一起滚动。如果目标用户含大量微信场景，得加一层 position: absolute + scroll 监听兜底，但代价是更重的 JS 计算。
