Mobile browsers and position: fixed

The CSS property position:fixed in Mobile Safari works reasonably well starting with iOS 5. In Android, the native browser partially understands this property from version 2.1 of the system, adequately from 2.2, full support from 3.0. Details: table support position:fixed .

HTML:

 <div id="topbar">Fixed Title</div> <div id="content"> <h2>Start</h2> <p>Main content text </p> ... <p>Main content text </p> <h2>End</h2> </div> <div id="bottombar">Fixed footer</div>

CSS:

 #content{ padding: 50px 0; /*   ,         */ } #topbar, #bottombar { position: fixed; left: 0; width:100%; height: 50px; /*     */ line-height:50px; background:#eee; text-align: center; } #topbar {top: 0;} #bottombar {bottom: 0;}

Now in modern smarts, we have topbar and bottombar "nailed" respectively to the top and bottom of the window. The problem of positioning on the first scroll in iOS is solved by mini-Javacript ( fixed ):

 window.scrollBy(0, 1);

For the "oldies" do the imitation on the principle of progressive enhancemen .

We define support position:fixed; with the stackoverflow method and add a context class for non-supporting ( fixed ):

 //   position: fixed;[start] var isFixedSupported = (function(){ var isSupported = null; if (document.createElement) { var el = document.createElement("div"); if (el && el.style) { el.style.position = "fixed"; el.style.top = "10px"; var root = document.body; if (root && root.appendChild && root.removeChild) { root.appendChild(el); isSupported = el.offsetTop === 10; root.removeChild(el); } } } return isSupported; })(); //    "" window.onload = function(){ if (!isFixedSupported){ document.body.className += ' no-fixed-supported' : ''; } //  scroll window.scrollBy(0, 1); }

Respectively CSS:

 .no-fixed-supported #topbar, .no-fixed-supported #bottombar { position: absolute; }

Add touch and scroll event handling:

 //  position: fixed; var topbar = document.getElementById('topbar'); var bottombar = document.getElementById('bottombar'); var bottomBarHeight = bottombar.offsetHeight; var windowHeight = window.innerHeight; //   touch  scroll window.ontouchstart = function(e) { if (event.target !== topbar){ topbar.style = ""; } } window.onscroll = function(){ var scrollTop = window.scrollY; topbar.style.top = scrollTop + 'px'; bottombar.style.bottom = (scrollTop + windowHeight - bottomBarHeight) + 'px'; };

Result (corrected)

 <!DOCTYPE html> <html> <head> <title>TEST</title> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <style type="text/css"> #content{ padding: 50px 0; /*   ,         */ } #topbar, #bottombar { position: fixed; left: 0; width:100%; height: 50px; /*   topbar'   */ line-height:50px; background:#eee; text-align: center; } #topbar {top: 0;} #bottombar {bottom: 0;} .no-fixed-supported #topbar, .no-fixed-supported #bottombar { position: absolute; } </style> </head> <body> <div id="topbar">Fixed Title</div> <div id="content"> <h2>Start</h2> <p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p><p>Main content text</p> <h2>End</h2> </div> <div id="bottombar">Fixed footer</div> <script type="text/javascript"> //   position: fixed;[start] var isFixedSupported = (function(){ var isSupported = null; if (document.createElement) { var el = document.createElement("div"); if (el && el.style) { el.style.position = "fixed"; el.style.top = "10px"; var root = document.body; if (root && root.appendChild && root.removeChild) { root.appendChild(el); isSupported = (el.offsetTop === 10); root.removeChild(el); } } } return isSupported; })(); window.onload = function(){ if (!isFixedSupported){ //    "" document.body.className += ' no-fixed-supported'; //  position: fixed; var topbar = document.getElementById('topbar'); var bottombar = document.getElementById('bottombar'); var bottomBarHeight = bottombar.offsetHeight; var windowHeight = window.innerHeight; //   touch  scroll window.ontouchmove = function(e) { if (event.target !== topbar){ topbar.style = ""; } } window.onscroll = function(){ var scrollTop = window.scrollY; topbar.style.top = scrollTop + 'px'; bottombar.style.bottom = (scrollTop + windowHeight - bottomBarHeight) + 'px'; }; } //  scroll window.scrollBy(0, 1); } </script> </body> </html>

Demo
')
UPD: A source of inspiration .
UPD2: edits made. Auto zoom is disabled. Subfix code. Fixed primary offset. Tested on iOS 6.0.1, Android 2.3.7. Added demo.

Source: https://habr.com/ru/post/162841/

All Articles

Mobile browsers and position: fixed

More articles: