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

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

为什么直接写 <nav></nav> 加几行 <a></a> 就不动？

HTML 本身没有“悬浮”概念，所有元素默认按文档流排列。你写的 <nav></nav> 会老老实实待在它出现的位置，滚动就消失。要让它“钉”在屏幕一侧，必须用 CSS 强制脱离文档流。

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

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

别把导航塞进某个大 <div class="container"> 里再 fixed —— 容器本身的 padding/margin/transform 会干扰 fixed 元素定位。最可靠的做法是让导航栏直接挂在 <code> 下一级：

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

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

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

立即学习“前端免费学习笔记（深入）”；

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

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

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

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