说明

• 因为文章目录跳转的偏移没有将导航栏高度考虑在内, 目前导航栏没有设置sticky
  
• 为侧边栏导航和文章目录添加了sticky类
  
• 本节使用文章目录作为示例
  

CSS样式

1. 上半部分雷打不动, position和top搭配使用
   
2. 高度还是设置的好, 因为div长度如果超过显示器长度, 此时无法滚动
   

Copy 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}

附: 文章目录链接样式和高亮样式

1. 链接无下划线 text-decoration
   
2. 高亮时字体加粗 font-weight
   
3. 鼠标悬浮变色 hover
   

Copy 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}

便签