用 position: fixed 实现右下角悬浮图标，核心是设 right: 20px; bottom: 20px; z-index: 9999;，确保脱离文档流并压盖其他内容；需避免父容器含 transform/filter 干扰定位，移动端应加媒体查询适配，QQ 跳转仅支持 HTTPS 临时会话链接。
直接用 position: fixed + 简单 DOM 就能实现，不需要任何框架或 SDK，但 QQ 官方已下线旧版“在线状态”接口（http://wpa.qq.com/online），现在只能跳转临时会话，无法实时显示是否在线。
怎么让图标固定在右下角不随滚动消失
核心是 CSS 的 fixed 定位，配合 z-index 确保压在其他内容上：
.qq-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
}
- 别用
absolute—— 滚动时会跟着页面内容跑掉 - 如果页面有
transform或filter的父容器，可能干扰fixed行为，加will-change: transform或提升父级层级可缓解 - 移动端建议加
@media (max-width: 768px)调整right/bottom值，避免遮挡返回按钮
怎么生成合法的 QQ 临时会话链接
QQ 不再支持前端直接查在线状态，所有“点击即聊”都必须走 tencent://message 协议或 https://wpa.qq.com/msgrd 跳转：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐用 HTTPS 链接，兼容性更好：
https://wpa.qq.com/msgrd?v=3&uin=123456789&site=xxx&menu=yes -
uin是你的 QQ 号（纯数字），必须 URL 编码；site是来源标识，可填域名，无实际校验 - 不要拼
http://—— iOS Safari 会拦截非 HTTPS 协议跳转 - 安卓微信内点链接默认打不开，得提示用户“在浏览器中打开”，或加一层 UA 判断 fallback
为什么点图标没反应或弹出空白页
常见原因集中在协议支持和环境限制：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge 最新版对
tencent://协议拦截更严，优先用 HTTPS 链接 - 微信内置浏览器（iOS/Android）基本禁用所有自定义协议，HTTPS 链接也会跳到“无法打开网页”页面
- 如果用了
target="_blank"但没加rel="noopener"，部分浏览器会因安全策略阻止新窗口 - 检查控制台有没有
Not allowed to navigate top frame to data URL类报错 —— 说明你误用了javascript:void(0)或空href绑定事件但没preventDefault
最简可用组合就两行：一个 fixed 容器 + 一个带 uin 的 HTTPS 链接。别试图绕过微信限制做“自动唤起 QQ”，那不是前端能控制的事。
