Menu
I have spent a lot of time trying jquery/javscript "fix" to get this worked. Since the last update of chrome mobile for IOS, the address bar of the browser behaves differently. I'm sure you guys are aware of what I'm talking about: You scroll down your page, the bar hides up, but once you scroll up, it appears. Yes, it is a good user experience, I can tell.
The problem is that I do have fixed element on top of my web app (header), and every time I scroll up, the address bar goes over my fixed element.
I've lookup other web apps (twitter, gmail), and they seems to have found a way to avoid this. I would like to read your ideas of how they achieved it. There is no need to tell me not to use fixed element.
So my question is : is there a way to avoid this? What's your idea of the situation.
example: https://mobile.twitter.com/EmWatson (must see on iphone preferably)
FYI : I use Jquery mobile framework for my web app.
thanks.
230
Well, I found a way to work.
<body style="overflow:hidden;">
<header style="width:auto;display:block;padding:12px;text-align:center;background-color:#1276c7;color:white;position:fixed;top:0;left:0;right:0;opacity:1;">FIXED HEADER</header>
<div role="main" style="height:100%;overflow-y:scroll;padding:60px 0;box-sizing:border-box;-webkit-overflow-scrolling: touch;">
<article>
...(content)...
</article>
</div>
</body>
It appears that we need an inner scrollable element and remove overflow on body. I overthought it, it seems. Hope this helps someone.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With