移动端是响应式,不需要固定导航栏。以下说明的是在桌面端,测试浏览器 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=:自然是行高
当我通过移动端视图测试导航栏时,我发现页脚行与行之间太窄,两行的文字都粘到一起了,于是我增大了行高。