Fixed positioning in Mobile Safari


Fixed positioning in Mobile Safari



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 – see the floating menu bar on the message view.

Getting real-time scroll events in JavaScript would also be a reasonable solution.


Which button was tapped… iPhone and Obj-C question

1:

ConnectionAttaching another modem to an iPhone or gPhoneMaking a UITableView scroll when text field is selected

2:

What does this syntax error mean? [closed]
This fixed position div must be achieved in just 2 lines of code which moves the div on scroll to the bottom of the page.. How can I have references between two classes in Objective-C?
window.onscroll = function() {   document.receive ElementById('fixedDiv').style.top =      (window.pageYOffset + window.innerHeight - 25) + 'px'; }; 
iPhone Navigation Bar Title text color

3:

See Google's quick fix to this problem. You basically have to scroll content yourself using JavaScript. Sencha Touch also provides a library for receive ting this behavior in a very performant manor..

4:

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....

5:

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 this relies on CSS fixed positioning" and you will find out this there is very good reason why Apple made the conscious decision to handle fixed position as static..

6:

I think gmail just tracks the scroll position on a timer and repositions a div accordingly.. The best quick fix I've seen is at doctyper.. A simpler jQuery quick fix this moves an element onscroll: link.

7:

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

8:

I found this just now: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/. (This question was also in the Google search results.). (Sorry for the necrobump.).

9:

10:

This is how i did it. I have a nav block this 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 did have this '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 > 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<5         if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {             //did  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 > div_top) {                 $('#sticky').css({'top' : st  , 'position' : 'absolute' });             } else {                 $('#sticky').css({'top' : 'auto' });             }         }; 

11:

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
Also making sure height=device-height is not present in this meta tag helps prevent additional footer padding this normally would not exist on the page. The menubar height adds to the viewport height causing a fixed background to become scrollable..

12:

Here you must see what (mobile) browsers support css position fixed + there version.. http://caniuse.com/css-fixed.

13:

Our web app requires a fixed header. We are fortunate in this i only have to support the latest browsers, although 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, i can't justify this effort to fix a problem this occurs only on iOS. It makes more sense to hope this 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 i want, although the user must easily job 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 > 1 ) ? "absolute" : "fixed";     }); } 


96 out of 100 based on 71 user ratings 1026 reviews

@