I have created a page that has a fixed header when scrolled. It works fine, but It is very strange why! It seems rather complicated to me, but I hope that one of you guys can rumble what is going on.
[B]Permanent screen header – how it works
My study can be seen on [url]http://ovovow.dk/fixedtop
The page has two headers, one for the page when it is not scrolled, and one for the scrolled page, I gave them ids as respectively pageheader and screenheader.
The default box model is changed to border-box in the CSS, and the headers and the main content is laid out using the position and z-index elements.
The page has 3 layers. The headers are in the two upper layers. The third layer in the bottom contains the main content and the footer.
[FONT=Courier New] 1_____
2__ Topline (z-index: 1) – not scrollable
3 __
The first layer is the upper layer in the z-index stack and the topmost content on the page. This layer contains the title and the topline. The middle layer contains the screenheader. This is always placed topmost on the screen (position: fixed), and on the z-index layer underneath the pageheader. The lower layer contains the main content followed by the footer.
To start with you can not see the fixed screenheader, it is hidden by the upper pageheader layer. Scrolling do not affect the screenheader, so it becomes visible when you scroll the pageheader out of the screen.
The page content will also be scrolled out of the screen, but under the screenheader in the z-index stack. This way you will always have a header on the page or screen.
[B]How come?
The strange and tricky part of the code lies in the border property on the pageheader. If you take that away the whole idea is broken.
The first line in the screenheader will be visible in the area where the h1 margin in the pageheader should cover it, and, in the bottom of the pageheader the p tag lose its margin-bottom. What is really tricky, the screenheader’s first line seems to be followed by its parent, the wrapper – something weird will come across the normal flow!!
And that is what my question is about, how come?