Why do websites toggle header visibility on scroll?

Some websites have a (usually rather small) header that hides when the user scroll down.

What I never understood is why it is shown again when scrolling up. Sometimes I want to scroll a bit up to read content a little higher on the page and it becomes really annoying. Here is an example.

Why is this done? What are web designers trying to accomplish by implementing this? It seems to be just really annoying.