说明
- 因为文章目录跳转的偏移没有将导航栏高度考虑在内, 目前导航栏没有设置sticky
- 为侧边栏导航和文章目录添加了sticky类
- 本节使用文章目录作为示例
CSS样式
- 上半部分雷打不动, position和top搭配使用
- 高度还是设置的好, 因为div长度如果超过显示器长度, 此时无法滚动
1div.toc-sticky {
2 position: -webkit-sticky;
3 position: sticky;
4 top: 30px;
5 overflow-y: auto;
6
7 padding: 20px;
8 height: 500px;
9 background-color: white;
10 border: 2px solid grey;
11 border-radius: 3px;
12}
附: 文章目录链接样式和高亮样式
- 链接无下划线
text-decoration
- 高亮时字体加粗
font-weight
- 鼠标悬浮变色
hover
1div.toc-s {
2 color: black;
3
4 a {
5 color: black;
6 text-decoration: none;
7 }
8
9 li.active {
10 a, button {
11 color: blue;
12 font-weight: 800;
13 transition: all .25s ease-in-out
14 }
15 }
16 a:hover {
17 color: brown;
18 }
19}
便签