全部 Skills
前端交互HTMLv1.1.0

滚动隐藏悬浮导航

向下滚动时收起为左下角圆形入口,向上滚动时展开短胶囊与独立加号。支持浅深主题、滚动阈值与强调色调整。

滚动隐藏悬浮导航HTMLPython

在线体验

交互效果示例

在图标区域向下滚动收起胶囊,左侧头像仍可操作;向上滚动恢复。右侧「+」可添加示例图标。

在新窗口预览 ↗
从体验到项目

把这个效果用起来

完整包包含 Skill 说明、Python 生成器、HTML 模板与离线预览。需要 Python 3.10+,无需额外依赖。支持桌面和移动端、键盘操作与减少动态效果;图标网格和视图切换为交互示例。

单独下载 SKILL.md
  1. 下载并解压

    保留 scroll-hide-toolbar/ 文件夹,其中的 SKILL.md 是技能入口,scripts/ 是生成器,templates/ 是界面模板,references/ 是设计说明。preview.html 可直接用浏览器打开。

  2. 交给 AI 编程助手

    把整个文件夹放进项目,让助手读取其中的 SKILL.md;如果你的工具支持 Skills,也可按它的方式安装。

  3. 说出你要的效果

    请读取 scroll-hide-toolbar/SKILL.md,生成深色毛玻璃悬浮导航,强调色为 #ff5a36,滚动阈值为 12px。保存为 out/index.html,检查上下滚动隐藏与恢复、键盘交互及移动端布局。

Skill 源文件

SKILL.md
查看完整 Skill 内容