侧边固定定位+CSS transform实现分享栏隐藏/展开：用position: fixed+translateX()控制显隐，配合transition和z-index；展开时禁用body滚动；移动端适配宽度与交互；分享链接需encodeURIComponent及URL标准化。
侧边固定定位 + CSS transform 实现隐藏/展开
直接用 position: fixed 把分享栏钉在右侧边缘，再用 transform: translateX() 控制显隐——这是最轻量、兼容性好、不干扰文档流的做法。别用 display: none 或 visibility: hidden，它们会破坏过渡动画，且无法触发 :hover 伪类。
- 初始状态设为
transform: translateX(100%)（完全移出视口），宽度建议固定（如width: 280px） - 用
:hover或点击触发器（如按钮）切换transform: translateX(0) - 务必加
transition: transform 0.3s ease-out，否则生硬卡顿 - 注意 z-index 至少设为 99，避免被轮播图、弹窗等遮盖
点击展开时阻止页面滚动穿透
用户点开分享栏后如果滚动页面，背景内容还在动，体验割裂。这不是 bug，是浏览器默认行为——overflow: hidden 必须作用于 <body>，而非分享栏自身。
- 用 JavaScript 在展开时加
document.body.style.overflow = 'hidden' - 收起时恢复为
''（空字符串，继承默认值） - 别用
overflow: hidden !important写死在 CSS 里，否则影响其他模态框 - 移动端需额外处理：iOS Safari 对
body的overflow支持不稳定，可改用document.documentElement.style.overflow作为备选
微信/QQ/微博等分享链接生成逻辑
纯前端分享依赖各平台开放的 URL Scheme，不调用 SDK，无需后端支持。但参数拼接容易漏掉 encodeURIComponent，导致中文乱码或链接截断。
- 微信分享用
weixin://协议已废弃，现在必须跳转到https://share.weixin.qq.com/cgi-bin/miniprogramshare（仅限小程序）；网页分享实际靠用户手动复制链接，所以重点是生成带 utm 参数的干净 URL - QQ 分享：拼接
https://connect.qq.com/widget/shareqq/index.html?url=+encodeURIComponent(location.href) - 微博分享：用
https://service.weibo.com/share/share.php?url=+ 同样 encodeURIComponent - 务必对
title和desc字段也单独 encode，比如title=encodeURIComponent(document.title)
移动端适配与触摸反馈优化
侧边栏在小屏上若保持 280px 宽，会挤占正文空间，且手指点击区域太小。不能只靠 media query 缩小宽度，还要调整交互方式。
立即学习“前端免费学习笔记（深入）”；
- 屏幕宽度
< 768px时，把展开触发方式从:hover切换为「点击按钮」，并把栏宽缩至240px - 添加
touch-action: manipulation到触发按钮，减少 300ms 点击延迟 - 分享图标用 SVG 而非字体图标，避免 iOS 上模糊或渲染错位
- 测试真机：Android Chrome 滚动时可能触发
transform重绘卡顿，加will-change: transform可缓解
location.href 没做 URL 标准化，比如带 hash 或 query 中有重复参数，会导致分享出去的链接打不开。动手前先写个 cleanShareUrl() 函数过滤掉无效片段。 
