I'm working on an existing site with a request for a fixed header that will appear at the top of the page. Several pages on the site serve as an index listing pages on the site by different criteria in alphabetic order. These pages contain alphabetic indexes at the top of the page for quick access to pages whose sort criteria begin with a particular letter.
My goal was to keep the alphabetic index on screen at all times using css fixed positioning. The header and the alphabetic index would be fixed at the top of the page. Unfortunately, when linking to a particular letter section using fragment id's (ie. "#q") the top of the target section is placed at the top of the viewport, not the top of it's containing box. In other words, the desired content is placed under the header, even though the body element is given an offsetting margin so that it does not appear under the head when the page is initially loaded. Obviously this makes the fixed jump navigation rather pointless and I'd be better off just letting it scroll out of site if I can't get this to work.
I tried playing with the overflow property, but that didn't help any. My question is if anybody has any experience with this and could give advice on how to get this working as expected.
The page in question can be viewed at http://www.eecs.umich.edu/gasm/authorindex.html.
My goal was to keep the alphabetic index on screen at all times using css fixed positioning. The header and the alphabetic index would be fixed at the top of the page. Unfortunately, when linking to a particular letter section using fragment id's (ie. "#q") the top of the target section is placed at the top of the viewport, not the top of it's containing box. In other words, the desired content is placed under the header, even though the body element is given an offsetting margin so that it does not appear under the head when the page is initially loaded. Obviously this makes the fixed jump navigation rather pointless and I'd be better off just letting it scroll out of site if I can't get this to work.
I tried playing with the overflow property, but that didn't help any. My question is if anybody has any experience with this and could give advice on how to get this working as expected.
The page in question can be viewed at http://www.eecs.umich.edu/gasm/authorindex.html.