这是一份超长测试文档,专门用来验证:当正文内容很长、向下滚动时,左右两侧栏能否正确吸顶、正文是否继续滚动、导航是否下滑隐藏。
第一部分
详细介绍第一部分的内容。这里会写入多段文字,把页面撑到超过一屏,从而触发 sticky 吸顶效果。左侧栏包含作者简介、分类、标签等内容;右侧栏包含目录、最新笔记、反向链接等信息。
在吸顶不发生时,两个侧栏会跟随页面一起滚动。但当页面滚动到一定高度后,侧栏应当停留在视口顶部附近,而中间的正文继续往下滚。
第二部分
第二部分。继续书写足够长的内容。正文里的标题会同时出现在右侧的目录(TOC)卡片里,方便我们观察目录高亮是否随滚动正确切换。
段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。段落内容。
第三部分
第三部分。这里有意插入多个标题层级,让右侧目录产生足够多的条目,便于观察吸顶后的目录滚动。
三级小节 A
三级小节 A 的正文内容,继续撑长页面。
三级小节 B
三级小节 B 的正文内容,继续撑长页面。
第四部分
第四部分正文。继续写入大量文字以增加页面高度。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
第五部分
第五部分正文。继续。
第六部分
第六部分正文。继续。
第七部分
第七部分正文。继续往下书写,直到页面足够高。
第八部分
第八部分正文。继续。
第九部分
第九部分正文。继续。
第十部分
第十部分正文。到这里页面已经很长,滚动应该已经触发了两次导航隐藏与侧栏吸顶。
第十一部分
第十一部分正文。继续。
第十二部分
第十二部分正文。可以观察左右侧栏是否都正确吸顶。
第十三部分
第十三部分正文。继续。
第十四部分
第十四部分正文。继续。
第十五部分
第十五部分正文。已经足够长,测试结束。