Css 具有固定标题的两个可滚动列设计

我正在尝试制作两个单独的可滚动列 在这里，第一列已经是可滚动的

然而，在第二列中，我只需要将该列的一部分与标题一起滚动，以保持其余部分被滚动掉

以下是我正在尝试的代码：

<div class="col1">
    ...
</div>
<div class="col2">
    Title
    <div class="scrollable">
        ...
    </div>
</div>

...
标题
...

css是

.col1 { position: fixed; width: 25%; overflow: auto; top: 0; bottom: 0; } .col2 { position: fixed; left: 30%; } .scrollable { position: relative; overflow: auto; top: 0; bottom: 0; } .col1{ 位置：固定； 宽度：25%； 溢出：自动； 排名：0； 底部：0； } .col2{ 位置：固定； 左：30%； } .可滚动{ 位置：相对位置； 溢出：自动； 排名：0； 底部：0； } 你知道如何实现这个功能吗？ （有或没有引导，如果有帮助的话。）

HTML

<div class="sidebar">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
</div>
<div class="header">
    <h2>Title</h2>
</div>
<div class="scrollable">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
</div>

.sidebar {
    position: fixed;
    width: 25%;
    overflow: auto;
    top: 0;
    bottom: 0;
}
.header {
    position: fixed;
    left: 35%;
}  
.scrollable {
    position: fixed;
    width: 25%;
    left: 35%;
    overflow: auto;
    top: 70px;
    bottom: 0;
}