So if you are reading this and I've removed it from the blog or you just want to see it without any clutter there is a demo here.
If you just want the code, here it is, otherwise keep scrolling and I will explain how it works.
The area of the page that the transition takes place is between 100px and 400px from the top (in the demo this is the area that has the grey background). I will refer to this as the transition zone (I would prefer danger zone but it would get confusing as no danger is involved). So when the heading is 100px from the top the colour will be at full strength, when it is below 400px it will be grey.
When you scroll it calculates how far from the top the each post is, then how far through the transition zone it is, this is stored in the percentFromTop variable.
You put a starting rgb value in an array: var chStart=[196, 193, 185]; and an ending one: var chEnd=[54, 215, 0];.
The difference between the starting and ending colour for each colour channel is calculated in var chDiff. The rgb colour that should be used during the transition is then calculated in var chTrans.
After that it's just some if statements that see where the element is to decide what colour to use. If it's below 400px from the top it uses the starting colour (grey), if it's above 100px it uses the ending colour (green) and if it's between those it's in the transition zone so uses the colour that was just calculated with all those variables and crazy things.
I know there is a lot of repeating so I'm sure this could get compressed a lot. I was thinking of having different colours for the different categories, if I do this I will probably look at changing it then as it currently can't handle more than one colour change. The other thing that's missing is that there is no colour set on page load, only on scroll. I got around this by setting the heading colour to green in the css. I figured that my posts would always be at least the height of the window since I like using pictures, so it would be unusual for there to be an instance when there would be two headings visible on the page when it loads. Hopefully I will write that at some point though.