Hide/shrink header on scroll page

[Eldenroot]

Hi,

I had been trying to make it work, but without success. I would like to hide/make header smaller when the user scroll down (for example 500px).

Can you please tell me how? I have tried this but without success:
https://jsfiddle.net/mariusc23/s6mLJ/31/

Thank you very much?

P.S. Srry for my English, I hope you understand my request - I mena something like this http://www.mybboost.com/ but not make header smaller, just hide it.

[WallBB]

You can use focus theme as an example, it is having exactly what you need.

[Eldenroot]

@WallBB - I tried this but the screen was blinking after that (Google Chrome) during scrolling

---

Solved, I just changed my design and do not need this feature anymore. Anyway thank you for oyur help!