Fixed positioning in Mobile Safari

Question

Is it possible to position an element fixed relative to the viewport in Mobile Safari  As many have noted  position  fixed doesn t work  but Gmail just came out with a solution that almost is what I want  ndash  see the floating menu bar on the message view   Getting real-time scroll events in JavaScript would also be a reasonable solution

User · Answer

I think gmail just tracks the scroll position on a timer and repositions a div accordingly   The best solution I ve seen is at doctyper   A simpler jQuery solution that moves an element onscroll  link

User · Answer

See Google s solution to this problem  You basically have to scroll content yourself using JavaScript  Sencha Touch also provides a library for getting this behavior in a very performant manor

User · Answer

This fixed position div can be achieved in just 2 lines of code which moves the div on scroll to the bottom of the page   window onscroll   function       document getElementById  fixedDiv   style top         window pageYOffset   window innerHeight - 25     px

User · Answer

lt meta name  viewport  content  width 320  initial-scale 1 0  minimum-scale 1 0  maximum-scale 1 0  user-scalable no   gt     Also making sure height device-height is not present in this meta tag helps prevent additional footer padding that normally would not exist on the page  The menubar height adds to the viewport height causing a fixed background to become scrollable

User · Answer

This may interest you  It s Apple Dev support page   http   developer apple com library ios  technotes tn2010 tn2262   Read the point  4  Modify code that relies on CSS fixed positioning  and you will find out that there is very good reason why Apple made the conscious decision to handle fixed position as static

User · Answer

iOS 5 has support for position fixed

User · Answer

it worked for me   function changeFooterPosition              footer-menu   css  top   window innerHeight   window scrollY - 44    px         document  bind  scroll   function       changeFooterPosition           44 is the height of my bar   Although the bar only moves at the end of the scroll

User · Answer

This is how i did it  I have a nav block that is below the header once you scroll the page down it  sticks  to the top of the window  If you scroll back to top  nav goes back in it s place I use position fixed in CSS for non mobile platforms and iOS5  Other Mobile versions do have that  lag  until screen stops scrolling before it s set      css  sticky stick       width 100       height 50px      position  fixed      top  0      z-index  1        jquery    sticky nav     function sticky relocate           var window top     window  scrollTop          var div top       sticky-anchor   offset   top         if  window top  gt  div top              sticky   addClass  stick          else             sticky   removeClass  stick              window  scroll function event           sticky nav css NON mobile way        sticky relocate            var st     this  scrollTop            sticky nav iPhone android mobile way iOS lt 5         if  navigator userAgent match  OS 5   d   like Mac OS X i                   do nothing uses sticky relocate   css          else if   navigator userAgent match   iPod iPhone iPad  i     navigator userAgent match  Android i     navigator userAgent match  webOS i                   var window top     window  scrollTop                var div top       sticky-anchor   offset   top               if  window top  gt  div top                        sticky   css   top    st     position     absolute                    else                       sticky   css   top     auto

User · Answer

You could try using touch-scroll  a jQuery plugin that mimics scrolling with fixed elements on mobile Safari  https   github com neave touch-scroll  View an example with your iOS device at http   neave github com touch-scroll   Or an alternative is iScroll  http   cubiq org iscroll

User · Answer

Here you can see what  mobile  browsers support css position fixed   there version   http   caniuse com css-fixed

User · Answer

Our web app requires a fixed header   We are fortunate in that we only have to support the latest browsers  but Safari s behavior in this area caused us a real problem     The best fix  as others have pointed out  is to write our own scrolling code   However  we can t justify that effort to fix a problem that occurs only on iOS   It makes more sense to hope that Apple may fix this problem  especially since  as QuirksMode suggests  Apple now stands alone in their interpretation of  position fixed      http   www quirksmode org blog archives 2013 12 position fixed 1 html  What worked for us is to toggle between  position fixed  and  position absolute  depending on whether the user has zoomed   This replaces our  floating  header with predictable behavior  which is important for usability   When zoomed  the behavior is not what we want  but the user can easily work around this by reversing the zoom        On iOS   position  fixed   is not supported when zoomed  so toggle  position  absolute    header   document createElement   HEADER     document body appendChild  header    if  navigator userAgent match   iPad i      navigator userAgent match   iPhone i          addEventListener  document body  function  event             var zoomLevel      Math abs  window orientation       90     screen height   screen width     window innerWidth          header style position     zoomLevel  gt  1      absolute     fixed

[javascript] Fixed positioning in Mobile Safari

Examples related to javascript

Examples related to iphone

Examples related to css

Examples related to mobile-safari