移动端是响应式，不需要固定导航栏。以下说明的是在桌面端，测试浏览器 Google Chrome，系统 Ubuntu 20.04.1。
我博客原来的导航栏是跟随列表移动的，前天我觉得这样不太方便，所以我开始想着要把导航栏固定在那，这样不需要用鼠标滚那么久，当然你可以用快捷键 Ctrl + Page Up，但还是不方便。于是，今天我开始实现这个想法。
我进行的所有改动都在 tianheg/blog 仓库的这条 commit 下：9137139，下面叙述我的改动以及意义。
主要改动的文件：=assets/scss/_navigation.scss=，=assets/scss/_content.scss=，其他文件：=assets/scss/_footer.scss=。
assets/scss/_navigation.scss
.navigation {
position: fixed;
top: 0;
z-index: 4;
background-color: #fff;
.navigation-list {
@media only screen and (max-width: 768px) {
position: relative;
// top: 2rem;
}
}
}
- 固定导航栏，需要用到
position: fixed;它的含义就是固定 top=：如果没有定义 =position=，定义 =top不会有任何效果。=top: 0;= 意为与上边界（此处指窗口）的距离为 0- =z-index=：它能让导航栏显示在窗口的最上层（上下的坐标是垂直于窗口的 z 轴），从而不会被下面的内容遮住
- =background-color=：它能改变导航栏的背景色。默认背景色是透明，在页面滚动时，导航栏的下层（上下的坐标是垂直于窗口的 z 轴）也会有文字，这样不够美观。把背景色设为白色，能够让整个界面在滚动时更加统一
- =top: 2rem;=：原来它没有被注释，是因为我在移动端视图测试时，偶然发现一个不简洁的地方，而解决的办法就是把这段 CSS 注释掉
来让我们对比一下：
两张照片的区别在于，后者的 z-index=，=background-color
都被注释掉。显而易见导航栏和正文内容交叠在一起，看起来不够简洁。
你看，如果不把 top: 2rem;
注释掉，就会像后面这个图，正文的内容（=z-index:
0;=）会在导航栏部分（=z-index: 5;=）显示。
assets/scss/_content.scss
.content {
margin-top: 6.4rem; // 原来是 1.6rem
}
- =margin-top=：它作用是改变盒子外边距
1.6 不足够把"共计 x 篇日志"显示出来，所以就按照 1.6
的整数倍挨个试，又因为 margin-bottom: 3.2rem; 所以下意识就试了
6.4，成功！