零基础做不出侧边悬浮导航栏，是因为HTML不支持悬浮，需用CSS的position: fixed脱离文档流，并将nav直接置于body下、设具体top/right值、目标区块配id且href指向正确，同时处理scroll-margin-top避免被header遮挡。

零基础做不出能用的侧边悬浮导航栏，不是因为你不会写 HTML，而是因为“悬浮”这件事根本不在 HTML 能力范围内——它靠的是 CSS 的 position: fixed 和合理的 DOM 结构，HTML 只负责提供骨架。

为什么直接写

加几行 就不动？

HTML 本身没有“悬浮”概念，所有元素默认按文档流排列。你写的

会老老实实待在它出现的位置，滚动就消失。要让它“钉”在屏幕一侧，必须用 CSS 强制脱离文档流。

• 必须给导航容器加 position: fixed，否则永远随页面滚动
• top 和 right（或 left）必须设具体值，比如 top: 100px、right: 20px，空着或写 auto 就无效
• 如果父容器有 overflow: hidden，可能把固定定位的导航栏直接裁掉——检查 body 或 wrapper 是否意外加了这个样式

position: fixed 配合什么结构最稳？

别把导航塞进某个大

里再 fixed —— 容器本身的 padding/margin/transform 会干扰 fixed 元素定位。最可靠的做法是让导航栏直接挂在 下一级：

  <nav id="sidebar-nav"><a href="#section1">第一章</a>
    <a href="#section2">第二章</a>
  </nav><main>...正文内容...</main>

然后只对 #sidebar-nav 设置样式，不依赖任何父级布局。这样定位干净，也不怕被其他 CSS 意外影响。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

点击跳转没反应？检查这三件事

常见现象：导航链接点不动，或者点了跳转到顶部而不是对应区块。

• 确保目标区块有对应 id，比如
  ，不能写成 class="section1"
• 不要用 href="#" 或 href="javascript:void(0)"——它们不触发锚点滚动，只是刷新或啥都不干
• 如果页面顶部有吸顶 header，记得给目标区块加 scroll-margin-top，比如 scroll-margin-top: 80px，否则滚动后会被 header 盖住

真正卡住人的地方，往往不是代码写错，而是 fixed 定位和锚点滚动这两个机制各自生效的条件没凑齐——一个漏设 top，一个少写 id，整个功能就静音了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！