I make a one-page-website (with scrolling on jquery). On big resolutions, from 1024x768 and more, it's all right. But if I try to zoom a page on tablet or open it on smartphone, I see that the div with navigation menu "crawls" over the text. The reason is clear - position:fixed. Without it this div will go up by scrolling down and I don't need it. Is it possible, to make this div with :fixed scalable or something like that? My objective is - it has to be always on the same height and do not cover a text. And I don't know how to do it...
[edited by: DrDoc at 4:19 pm (utc) on Aug 6, 2013] [edit reason] Removed excessive CSS [/edit]
I forget the details, but I know that some webkit-based mobile browsers don't fully support position:fixed. I just don't recall if it's just Safari or if Chrome also has the problem. I believe that the problem browsers always render position:fixed as having top:0; set. I'm sure you can find the details online, but the only work-around I know of is to work with position:absolute if possible.
Yeah, it happens on iPad, iPhone (Safari), but it's already enough for me. I don't have some devices on Android, maybe it will be the same problem. In my case is :absolute the same thing like :relative, so the div simply goes up if you scroll down the page. I think I have to try other ways. Sh... Thanks for the answer!