تحديد الموضع الثابت في Mobile Safari: دليل شامل

قد يكون تحقيق موضع ثابت لعنصر بالنسبة إلى إطار العرض في Mobile Safari أمرًا صعبًا. على الرغم من الاعتقاد السائد بأن "الموضع: ثابت" لا يعمل في Mobile Safari، فقد قدم Gmail حلاً مبتكرًا يوفر تقريبًا دقيقًا للموضع الثابت الحقيقي.

أحد الأساليب لمعالجة هذه المشكلة هو الاستفادة من JavaScript لـ كشف أحداث التمرير في الوقت الحقيقي. يتيح لك هذا ضبط موضع العنصر ديناميكيًا أثناء تمرير الصفحة.

لتحقيق موضع div ثابت يتم تمريره إلى أسفل الصفحة، يمكنك تنفيذ برنامج JavaScript بسيط:

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

من خلال ضبط الخاصية "العلوية" لعنصر "fixedDiv" استنادًا إلى إزاحة الصفحة وارتفاعها، سيحتفظ div بموضعه أسفل منفذ العرض أثناء تمرير المستخدم. يضمن التعديل "25" إزاحة div قليلاً من أسفل الشاشة للحصول على عرض مثالي.