<!-- css -->

<style>
.my-list {
    width: 200px;
    height: 300px;
    overflow-y: scroll;
}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.my-list ul li {
    margin: 0;
    padding: 0;
}
.my-list ul li.h {
    background: #EEE;
    width: 160px;
    height: 25px;
    border-bottom: 1px solid #CCC;
}
</style>

<!-- html -->

<div class="my-list">
    <ul>
        <li class="h">A</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
    </ul>
    <ul>
        <li class="h">B</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
    </ul>
    <ul>
        <li class="h">C</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
    </ul>
    <ul>
        <li class="h">D</li>
        <li>sdasdasd</li>
        <li>wer</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
    </ul>
    <ul>
        <li class="h">E</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>werwer</li>
        <li>sdasdasd</li>
        <li>erwerw</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
    </ul>
    <ul>
        <li class="h">H</li>
        <li>sdasdasd</li>
        <li>sdaswerwerwdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
        <li>sdasdasd</li>
    </ul>
</div>

<!-- script -->

<script>
    hlist = document.getElementsByClassName('h');
    ylist = [];
    for (i=0; i<hlist.length; i++) {
        ylist[i]=hlist[i].offsetTop;
    }
    console.log(ylist);
    document.getElementsByClassName('my-list')[0].onscroll = function() {
        for (i=0; i<ylist.length; i++) {
            if (this.scrollTop > ylist[i]-(i*2*26)) {
                hlist[i].style.position = 'fixed';
                hlist[i].style.top = (26*i)+'px';
            }
        }
    }
</script>