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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.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

1
2
3
.content {
  margin-top: 6.4rem; // 原来是 1.6rem
}

  • =margin-top=:它作用是改变盒子外边距

1.6 不足够把“共计 x 篇日志”显示出来,所以就按照 1.6 的整数倍挨个试,又因为 margin-bottom: 3.2rem; 所以下意识就试了 6.4,成功!

#assets/scss/_footer.scss

1
2
3
.footer {
  line-height: 2rem;
}
  • =line-height=:自然是行高

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

Layout of comment panels