Создание промежутка времени в горизонтальной прокрутке без использования Position: sticky

Question

Создание промежутка слипания в горизонтальной прокрутке без использования Position: sticky

ul.outer-ul {
    display: flex;
    min-width: 100%;
    padding-bottom: 32px;
    height: 200px;
    overflow-x: auto;
    position: relative;
    border-radius: 0px 0px 5px 0px;
    background-color: rgba(156, 164, 182, 0);
}

li.inner-li {
    display: flex;
    position: relative;
}

span.inner-header {
  transform: rotate(-90deg) translateX(-200px);
  transform-origin: left top 0;
  text-align: center;
  text-transform: uppercase;
  color: black;
  font-size:30px;
}
.inner-div {
    background-color: #fdfdfd;
    width: 200px;
    margin-left: 8px;
    color: rgba(45, 41, 38, 1);
    display: flex;
    border: 1px solid;
}

<ul class="outer-ul">

    <li class="inner-li">
        <span class="inner-header">A</span>
        <div class="inner-div">A1</div>
        <div class="inner-div">A2</div>
        <div class="inner-div">A3</div>

    </li>
    <li class="inner-li">
            <span class="inner-header">B</span>
            <div class="inner-div">B1</div>
            <div class="inner-div">B2</div>
    </li>
    <li class="inner-li">
            <span class="inner-header">C</span>
            <div class="inner-div">C1</div>
            <div class="inner-div">C2</div>
            <div class="inner-div">C3</div>
            <div class="inner-div">C4</div>
    </li>
    <li class="inner-li">
            <span class="inner-header">D</span>
            <div class="inner-div">D1</div>
            <div class="inner-div">D2</div>
            <div class="inner-div">D3</div>
    </li>
    <li class="inner-li">
            <span class="inner-header">E</span>
            <div class="inner-div">E1</div>
            <div class="inner-div">E2</div>
    </li>
</ul>

Я сделал это с помощью позиции sticky, но в IE она не работает. Есть какой-либо способ сделать это. Это похоже на то, что когда я прокручиваю заголовок, он должен быть похож на sticky.until, когда его li не заканчивается, когда приходит следующий li, его диапазон должен быть показан. Есть ли способ в Jquery или CSS, который мы можем сделать это. Ссылка Fiddle https://jsfiddle.net/xrymt3a9/3

Я хочу, чтобы мой код работал, как показано в следующем примере: https://codepen.io/geddski/pen/rjYpVr. Но проблема в IE не работает

Пожалуйста, помогите?