Sticky column vertical scroll

I’m making a grid to dispose the contents in a specific way and I need to make one of the columns to scroll vertically follwing the long text that I have on the left column when the distance to the top is 0.

On my CSS, I’ve tried the position: sticky;, but is not working.

I’ve also tried to put a jQuery solution with var sidebar = document.getElementById(‘sidebar’);
Stickyfill.add(sidebar); but nothing.

I’m missing something?

Thank you

.grid1{
  content: '';
  display: block;
  clear: both;
  width: 100%;
}

.grade2{
  display: inline;
}

.grid3 {
    display: grid;
    grid-template-columns: 43% 57%;
}

.column-1-1 { 
float: left; 
width: 45%;
background: red;
}

.column-1-2 { 
float: right; 
width: 53%; 
background: red;
}

.column-2-1 { 
float: left; 
width: 18%;
background: blue;
}

.column-2-2 { 
float: left; 
width: 67%;
background: blue;
margin-left: 15px;
}

.column-2-3 { 
float: right; 
width: 11%; 
background: blue;
}
    
.column-3-1 { 
grid-column:1;
grid-row: 1;
background: green;
}

.column-3-2 { 
grid-column:2;
grid-row: 1;
background: green;
}

.column-3-3 { 
grid-column-start: 1;
grid-column-end: 3;
background: green;
margin-top: 15px;
grid-row: 2;
}

.info { 
position: sticky;
position: -webkit-sticky;
top: 0;
}
<div class="grid1">
  <div class="column-1-1"><h6><strong>title1<hr></strong></h6></div>
  <div class="column-1-2"><h6><strong>title2<hr></strong></h6></div>
</div>
<div class="grid2">
  <div class="column-2-1"><p><strong>text</strong></p></div>
  <div class="column-2-3"><div class="info"><p><strong>infos</strong></p></div></div>   
  <div class="column-2-2">
     <div class="grid3">
        <div class="column-3-1">text</div>
        <div class="column-3-2">(LONG TEXT)</div>
        <div class="column-3-3">text</div>
     </div>
   </div>    
</div>



Just found the solution with a jQuery code:

Add/remove class with jquery based on vertical scroll?