0

I've been after a specific navigation pattern. First I'll explain how I'd like it to behave:

If you imagine a web page with a large header or nav bar. When the page is scrolled down everything lower down on the page scrolls up whilst the header stays static underneath.

A very close example of this is here: http://inspectelement.com/demos/responsive/mobilenav/

In fact I tried contacting the author to no avail.

If you imagine that example but when scrolled up the grey bar then fixes to the top of the screen On scroll up the grey bar needs to detach again and start scrolling.

I've seen this work in many places and I've even built my own. The big issue is that all examples I've seen don't update immediately on iOS. The example above does and I think uses jquery animate, but I have the issue of detaching the grey bar without it jumping in ios.

If anyone can help I would be very grateful.

Mike

user1625752
  • 1

1 Answers1

0

The position: fixed css property does exactly what you are searching for I think.

edit : duplicate of this thread then ? CSS "position: fixed;" on iPad/iPhone?

Community
  • 1
  • 1
bperson
  • 1,285
  • 10
  • 19
  • Yes position fixed does work, but it jumps when it's scrolled in ios. I'm after a smooth effect. Thanks anyway – user1625752 Aug 26 '12 at 13:37
  • I edited my post (don't know if you were ping or not :( ). You should find better answers in this thread : http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone – bperson Aug 26 '12 at 14:39
  • Thanks for all that mate. I'm not sure it's going to do what I need. I'll give it a crack and if not I'll paste the code I make on jsfiddle. Mike – user1625752 Aug 27 '12 at 06:46