मोबाइल सफारी में निश्चित स्थिति: एक व्यापक गाइड

मोबाइल सफारी में व्यूपोर्ट के सापेक्ष किसी तत्व के लिए निश्चित स्थिति प्राप्त करना चुनौतीपूर्ण हो सकता है। व्यापक धारणा के बावजूद कि "स्थिति: निश्चित" मोबाइल सफारी में काम नहीं करती है, जीमेल ने एक अभिनव समाधान पेश किया है जो वास्तविक निश्चित स्थिति का एक करीबी अनुमान प्रदान करता है।

इस समस्या से निपटने का एक तरीका जावास्क्रिप्ट का लाभ उठाना है वास्तविक समय स्क्रॉल घटनाओं का पता लगाएं। यह आपको पृष्ठ को स्क्रॉल करते समय किसी तत्व की स्थिति को गतिशील रूप से समायोजित करने की अनुमति देता है।

पेज के नीचे स्क्रॉल करने वाली एक निश्चित स्थिति div प्राप्त करने के लिए, आप एक सरल जावास्क्रिप्ट स्क्रिप्ट लागू कर सकते हैं:

window.onscroll = function() {
  var fixedDiv = document.getElementById('fixedDiv');
  fixedDiv.style.top = (window.pageYOffset   window.innerHeight - 25)   'px';
};

पेज की ऑफसेट और ऊंचाई के आधार पर "फिक्सडिव" तत्व की "शीर्ष" संपत्ति को समायोजित करके, उपयोगकर्ता स्क्रॉल करते समय डिव व्यूपोर्ट के निचले भाग में अपनी स्थिति बनाए रखेगा। "25" समायोजन यह सुनिश्चित करता है कि इष्टतम दृश्य के लिए डिव स्क्रीन के नीचे से थोड़ा ऑफसेट है।