would like to pin and expand height of div on scroll

[mindbet]

I would like to accomplish the following:

--a fixed nav header at the top (black strip)

--as soon as you scroll, the red div just below the header expands in height and becomes pinned.
--divs below the first  (like the blue div) are not pinned

For the red div, the x:50 move works (it's just a test), but the height expansion does not work.

For blue div, the height expansion does work.

Codepen included.

TIA
 

See the Pen jOKWvVg by mindbet (@mindbet) on CodePen

[GreenSock]

If you look at Dev Tools, you'll see that it's doing exactly what you requested. The height gets set to 100vh on .section1. Here's a fork where I start with the height as 50px and use a yellow border so you can better watch what happens. I assume you were expecting the red part to grow, but that's a totally different element. 

 

Also, it's generally a bad idea to animate vertical properties of same element that you're using as the trigger on the vertical scrolling axis. It can throw off the measurements. In some scenarios, it can work - I just wanted to caution you.