How can I position the header so that it appears fixed to the top only if i hover over the top of the viewport?

I'm not entirely sure I understand what you want to do, but it sounds like this might be close:

header:hover {
  position: fixed;
  top: 0;
}

The catch is that since the item you are hovering is going to move, this effect may be rather unstable.

To do a better job you might need to hover over some other object already at the top and then move your header. For that, I think you'd need JavaScript. I can't think of any way to do that in pure CSS, unless you can make the header a descendant of the object you will hover over.

Just to expand on what Stephen said about the element being a child of what you're hovering over, if you didn't want to use JavaScript, although it's a little messy repeating elements, you could create a new/second header/navigation object as the last item before the body, and reveal it on hover.

.secondaryNav {
    display:block;
    position:fixed;
    top:0;
    opacity:0;
}

body:hover .secondaryNav{
    opacity:1;
}

Be aware it will always be there even if you can't see it, so you might want to consider experimenting setting z-index on it and other elements on the page so it starts off below the content and moves to the front on hover, or setting it's height to 0 and overflow to hidden and setting the height on hover.

This method would allow some css transition effects (animating either/both opacity and height of the element so it appeared to fade/slide in).