This is only a problem on an iPhone. Not tested on other mobiles, but can’t replicate on a desktop. I do believe this is a question for a ‘CSS’ expert rather than a ‘mobile’ expert though.
If I add this code:
position:fixed;
top:0;
background:yellow;
to a <div> then it sticks at the top of the page without any problems.
It also works perfectly on the iPhone. However, if you visit the page and append a named anchor to it (e.g. page.html#content) then it jumps around when scrolling.
I have a demo here:
http://www.page-test.co.uk/fix.html (works fine)
http://www.page-test.co.uk/fix.html#hello (fixed nav jumps around)
Sorry if this is obvious, but if testing on an iPhone and you visit the first link, you can’t just visit the second link. You need to either visit it and refresh the page, or open a new window.
If you go straight to the second link without visiting the first then it will show the problem (on an iPhone).
In real world use, if someone clicks a link to jump to a named anchor and then refreshes the page for whatever reason, they will see the problem.
Any ideas?