让博客的导航栏固定在窗口的边缘

移动端是响应式，不需要固定导航栏。以下说明的是在桌面端，测试浏览器 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，成功！

#assets/scss/_footer.scss

.footer {
  line-height: 2rem;
}

• =line-height=：自然是行高

当我通过移动端视图测试导航栏时，我发现页脚行与行之间太窄，两行的文字都粘到一起了，于是我增大了行高。