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

移动端是响应式，不需要固定导航栏。以下说明的是在桌面端，测试浏览器
Google Chrome，系统 Ubuntu 20.04.1。

我博客原来的导航栏是跟随列表移动的，前天我觉得这样不太方便，所以我开始想着要把导航栏固定在那，这样不需要用鼠标滚那么久，当然你可以用快捷键
Ctrl + Page Up，但还是不方便。于是，今天我开始实现这个想法。

我进行的所有改动都在 tianheg/blog 仓库的这条 commit
下：[9137139](https://github.com/tianheg/blog/commit/9137139329c0dc27f77577080cb0151c7453d66d)，下面叙述我的改动以及意义。

主要改动的文件：`assets/scss/_navigation.scss`，`assets/scss/_content.scss`，其他文件：`assets/scss/_footer.scss`。

### `assets/scss/_navigation.scss` {#assetsscss_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` {#assetsscss_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` {#assetsscss_footer.scss}

```
    .footer {
      line-height: 2rem;
    }
```

- `line-height` ：自然是行高

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