suggestion Suggestion: Remove 'position: fixed' from API docs topper

[benstrumental]

Notice that for the API docs the div topper scrolls with the page as you navigate when compared to the community page, which allows you to scroll away from the div topper. Vertical space is extremely valuable when reading code and documentation (or anything on a computer screen, really). I can see a possible rationale for this design decision being the ability to switch versions from anywhere in the page, as the version toolbar scrolls with the div topper, but I don't think the trade-off nearly worth it.

 

This has bugged me enough that I had to checkout the git repository and browse the docs locally. I believe it would be a better docs-browsing experience for all Phaser users with this small change.

I propose the following change to docs.css:
 

topper {
    position: relative;
    z-index: 99999;
    width: 100%;
    margin: 0 auto;
    background: url(/images/bg-body2.jpg) no-repeat 50% 0;
    background-size: 100% auto;

}

 

where `position: fixed` has been modified to be `position: relative`.

Thoughts?

Edited April 13, 2016 by benstrumental
clarifying my proposed change

[ericjbasti]

I agree 100%. Fixed anything should really take into account the height of the users screen.

I would probably recommend wrapping it in a media query for medium/small screens (I can see the fixed header being ok on massive screens). This is all the css that would be needed. (I just randomly picked the 800px height, seemed to work ok on my laptop)

@media screen and (max-height: 800px){
    #topper{
        position: relative;
    }
    #main .main-holder{
        margin-top: 0!important;
    }
}