Two scrollable column design with fixed titles

Question

I am trying to make two separately scrollable columns as in this JsFiddle, where the first column is already scrollable.

However, in the second column I need only part of the column to be scrollable with Title to stay as the rest is scrolled away.

Here is the code I am trying:

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

and the css is

.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;
}

Any idea how to achieve this functionality? (With or without Bootstrap if that helps.)

Answer 1

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>

CSS

.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;
}