👩‍🎨 🤢 😎 मोबाइल ब्राउज़र और स्थिति: निश्चित 🤭 🐷 🏝️

CSS position:fixed मोबाइल सफारी में position:fixed प्रॉपर्टी काफी हद तक iOS 5 के साथ शुरू होती है। एंड्रॉइड में, देशी ब्राउज़र आंशिक रूप से सिस्टम संस्करण 2.1 से शुरू होने वाली इस संपत्ति को समझता है, पर्याप्त रूप से 2.2 के साथ, 3.0 के साथ पूर्ण समर्थन। अधिक: समर्थन तालिका 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>

सीएसएस:

 #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;}

अब आधुनिक स्मार्टस में, हमारे टॉपबार और बॉम्बोबर क्रमशः खिड़की के ऊपर और नीचे "नेल्ड" होते हैं। IOS में पहले स्क्रॉल के दौरान पोजिशनिंग की समस्या को मिनी- Javacript ( फिक्स्ड ) द्वारा हल किया जाता है:

 window.scrollBy(0, 1);

"बूढ़े" के लिए हम प्रगतिशील संवर्द्धन के सिद्धांत पर नकल करते हैं।

हम position:fixed; लिए समर्थन को परिभाषित करते हैं position: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); }

तदनुसार सीएसएस:

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

स्पर्श और स्क्रॉल ईवेंट हैंडलिंग जोड़ें:

 //  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'; };

परिणाम (निश्चित)

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

डेमो

UPD: प्रेरणा का स्रोत ।
UPD2: किए गए परिवर्तन। अक्षम ऑटो ज़ूम। कोड तय है। निश्चित प्राथमिक पूर्वाग्रह। IOS 6.0.1, Android 2.3.7 पर परीक्षण किया गया। जोड़ा गया डेमो।

मोबाइल ब्राउज़र और स्थिति: निश्चित

More articles: