Can sticky position be used to handle multiple columns of different lengths independently

I am trying to create a 3-column layout in which the user can scroll the whole page but shorter columns stick in both directions according to their own (dynamic) length. The use case is specific to a column which is taller than the height of the viewport but has a sibling of greater height still.

The behaviour I am looking for is as follows:

• page loads, user begins to scroll down
• all columns SHORTER than viewport (100% visible) stick at X px from top
• all columns LONGER than viewport scroll with page until bottom enters viewport, then stick X px from bottom.
• all columns continue scrolling when bottom of longest column is reached (standard sticky positioning)
• when user changes direction, all columns LONGER than viewport begin scrolling again until the top reaches X px from top of viewport, then stick.

This means the user doesn't have to "wait" for the longer column when scrolling the page to view the contents of the shorter one.

So far I can only achieve this with the "wait", as per these examples:

Fiddle: https://jsfiddle.net/zLp0429w/
Dev site showing application: https://eco.matmartin.co.uk/works/?post=930

html:

<div class="threecol">
 <div class="col col25">
  <!-- dynamic content -->
 </div>
 <div class="col col60">
  <!-- dynamic content -->
 </div>
 <div class="col col15">
  <!-- dynamic content -->
 </div>
</div>

CSS:

.threecol {
  width: 100%;
  display: flex;
}

.threecol .col {
  min-height: 12px;
  align-self: start;
}

.threecol .col25 {
  width: 22%;
}

.threecol .col60 {
  position: sticky;
  top: 45px;
  width: 58%;
  padding: 0 2%;
  margin: 0 2%;
}

.threecol .col15 {
  width: 13%;
  position: sticky;
  top: 45px;
}

Is this possible? Pure CSS would be some form of magic, I am open to jQuery if strictly necessary.