Shrinking header on scroll messing up content

I succeeded in making a shrinking header on scroll but now the content below "falls up" when the header shrinks. I have tried setting .content-wrapper position to absolute which gives me the effect i want, but then i get a whole lot of other problems like content bleeding into the footer and the background no longer being sticky. Does anyone know the correct way to fix this problem? I don't want anything below the header to be affected by the shrinking of the header.

Thanks in advance