The left and right block are always visible on the page, how to do?

Question

css

Good evening everyone.
Stuck on the next script jsfiddle.net/webirus/q9uxpngt
It is necessary that the yellow blocks are always visible on the page, after scrolling the header, somehow fix them and that they scroll along with the page to the very footer, where they should stop above the footer, above the green stripe.
There was an attempt to make position: fixed, but I can’t stop the scrolling of the blocks, they fit on the footer and interfere with viewing.
I would like a universal solution that could be used both in a static layout and in an adaptive one (that is, when the height of the header and footer can change depending on the screen resolution when the blocks are rebuilt).
Can you please tell me how to do this?)

Answer 1

leafo.net/sticky-kit