利用position：sticky实现粘性布局

position:sticky，实现的效果就是在页面滚动的时候保持元素（如下图中的章节一）在页面视图上方，也就是吸附效果。
注意：章节行需设置背景色。若不设置背景色（背景透明），正常文档流的文字就会和章节行文字重叠在一起显示。

CSS:

main{
   width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}

header{
    position: sticky;
    top: 0;
    height: 30px;
    background-color: cyan;
}

HTML:

<main>
    <header>章节一</header>
    <div class="content"></div>
    <header>章节二</header>
    <div class="content"></div>
    <header>章节三</header>
    <div class="content"></div>
    <header>章节四</header>
    <div class="content"></div>
</main>

JS:

<script src="../libs/jquery/jquery-3.4.1.min.js"></script>
<script>
   let num = 20;
   let html = '';
   for(var i = 0; i < num; i++){
       html += `<p>学习第${i + 1}天</p>`
   }

   Array.prototype.slice.call($(".content")).forEach(item =>{
       item.innerHTML = html;
   })

</script>

补充兼容性问题：

从兼容图上清晰看出，若项目中需要考虑兼容低版本浏览器的话，要慎重考虑使用！！！