Javascript 使用Jquery使绝对按钮具有粘性动画

我有以下代码：

片段：

<div class="post-body d-flex">
    <!-- content -->
    <div class="post-content">
        <p>...</p>
    </div>

    <!-- button toggle -->
    <button type="button" class="btn sticky1 border-white outline-none"  style="box-shadow:none;" id="toc-button">
        <img src="https://i.imgur.com/NuY1GRF.png" width="25px" height="100px">
    </button>

    <!-- table of contents -->
    <div class="post-toc">
        <div class="d-block sticky-top mb-5">
            <div>
                <button type="button" class=" sticky-top btn outline-none" style="box-shadow:none" id="toc-button-2">
                    <img src="https://i.imgur.com/s1ej0s3.png" height="20px" >
                </button>
            </div>

            <div>
                <nav class="" id="toc"></nav>
            </div>
        </div>
    </div> 
</div>

我的问题是，如果不改变布局，我就不能让它变得粘乎乎的。我试图将其位置更改为“粘滞”，但布局会有一点变化

所以我认为最好的方法是使用Jquery脚本使它变得有粘性。在codepen中，若你们点击TOC按钮，它将展开一个目录，这个目录有我想要的完美的粘性动画

你能帮我做一个脚本，让我的TOC按钮在它的父分区帖子正文中变粘吗

---

非常感谢你们。

让它粘上，然后用所需的位置和高度100%制作绝对定位包装：

---

天啊。简单但完美。你是天才。非常感谢，先生。

#toc-button {
  width: fit-content;
  height: 110px;
  position: sticky;
  /*margin-top: 30px;*/
  top: 0;
  margin-bottom: 130px;
}

.toc-wrapper {
  right: 0;
  top: 15px;
  position: absolute;
  height: 100%;
}