I have developed an app using a mix of JQM and HTML5 elements. The app has a fixed header which I have fixed using CSS rather than explicitly using the data-position="fixed" way as this doesn't work right for my app.
When I scroll the app, the header stays nicely in place and HTML5 elements scroll underneath it nicely. However if there is a JQM element such as flip-switch or button then they scroll over the top of the header!
Can anyone please give me any pointers as why this might be?
Hi thanks for the replies. Whilst I understand and agree that the best solution would be to find out why data-position="fixed" doesn't work properly, I don't really have the time to investigate this at the moment.
I have fixed it by putting a z-index high value in the CSS for the HTML5 fixed header.
Could you provide some insight as to why it doesn't work? What is making it unusable for you? I believe by adding data-position="fixed" it simply adds position:fixed as a css attribute. Maybe some other cosmetic changes, but nothing major to my knowledge.
I think it also adds padding to the content to prevent the top of the content from disappearing under the header. (Isn't the OP having a problem with that with the current approach?)
As well, it does some fancy footwork if you are using a persistent header, moving the header in and out of documents and adjusting padding. I think it also has to play with padding during input with virtual keyboards.
That said, I don't rely on flxed headers, because they seem so flakey to users. I use them - I just don't rely on them. I use iScroll to scroll content, but still use fixed headers (even though I could use inline). As long as you keep content from scrolling under them, fixed headers/footer behave fine and have the advantage over inline that they won't ever jump around during page construction.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic