البرامج التعليمية
Claude Opus 5.5: إصلاح روابط الأقسام التي يحجبها رأس ثابت
قبل إضافة إزاحة لروابط الأقسام، اطلب من Claude Opus 5.5 قياس المساحة التي يشغلها الرأس وتحديد حاوية التمرير الفعلية.
قبل إضافة إزاحة لروابط الأقسام، اطلب من Claude Opus 5.5 قياس المساحة التي يشغلها الرأس وتحديد حاوية التمرير الفعلية. قد يكون العنوان موجودا عند جزء الرابط الصحيح لكنه مخفي خلف التنقل. يجب أن يعمل الإصلاح مع قائمة ملتفة وشريط ترويجي وتركيز لوحة المفاتيح.
يصف سؤال مطور عن رأس ثابت العارض نفسه. إنه سياق مجتمعي وليس تشخيصا لصفحتك. ما يلي سير إصلاح مقترح مع مثال حسابي، لا اختبار منفذ باستخدام Opus.
حدد موضع المساحة الناقصة
| الحالة | ما تفحصه | موضع التصحيح المحتمل |
|---|---|---|
| كل أهداف الأقسام مخفية | حاوية التمرير وارتفاع الغطاء | scroll padding للحاوية |
| هدف واحد يحتاج إلى فصل | محاذاة ذلك الهدف | scroll margin للهدف |
| قائمة الهاتف تلتف لسطرين | ارتفاع الرأس المشغول فعليا | إزاحة متجاوبة أو مقاسة |
| عنصر عليه التركيز مخفي | مسار المفاتيح وكل الأغطية | ظهور التركيز لا انتقال الجزء فقط |
يصف مرجع MDN لـ scroll-margin-top إزاحة مرتبطة بمنطقة تمرير الهدف. لا تخلطها بهامش التخطيط المرئي. تعرض تقنية W3C C43 استخدام حشوة التمرير للمحتوى المحجوب. نجاح انتقال واحد ليس تقييما كاملا لإمكانية الوصول.
احسب إزاحة ثم تحقق منها
افترض صفحة خيالية بشريط تنقل ثابت ارتفاعه 64 بكسل CSS وشريط ترويجي ارتفاعه 32 فوقه مباشرة. يشغلان 96 بكسلا، ومع فراغ مطلوب قدره 16 تصبح القيمة 112. إذا التف التنقل وأصبح ارتفاعه 88 فالمجموع 136. هذه أبعاد مفترضة وحسابات، وليست قياسات Panelly.
في كتابة أفقية ومع المستند حاوية للتمرير وغطاء مؤكد ارتفاعه 96 بكسلا، يمكن البدء بهذا المثال:
html { scroll-padding-top: 112px; }تتضمن القيمة الفراغ المطلوب. لا تضف تلقائيا 112 أخرى كهامش تمرير للهدف، فقد تصبح الإزاحة مفرطة. إذا احتاج هدف واحد إلى زيادة، حددها بقصد. تحقق من عنصر التمرير الحقيقي عندما يكون المحتوى داخل لوحة؛ إعداد `html` لا يضبط حاوية أخرى.
يتقادم الرقم الثابت إذا ظهر شريط أو التفّت القائمة. فكر في تخطيط يمنع التداخل أو قيمة متجاوبة مناسبة أو ارتفاع مشترك مقاس بعناية. اختبر بعد تحميل الخطوط. إذا شغل الرأس مساحة كبيرة من شاشة ضيقة، فقد يكون إلغاء ثباته أفضل من زيادة الإزاحة بلا نهاية.
توجيه إصلاح جاهز لـ Opus
استخدمه مع دليل Opus الرسمي.
افحص بنية الصفحة والأنماط المحسوبة وأبعاد الرأس والشريط ورابط الجزء الذي يفشل. حدد حاوية التمرير الفعلية وكل غطاء ثابت أو لاصق يؤثر في الهدف.
افصل مسافات التدفق العادي وحشوة تمرير الحاوية وهامش تمرير الهدف. احسب الارتفاع المشغول والفراغ المطلوب. لا تجمع إزاحات دون شرح أثرها الكلي. راع التفاف التنقل وتحميل الخط وإغلاق الشريط.
اقترح أصغر تعديل يحفظ معرفات الأجزاء والروابط الحالية. حافظ على التنقل الأصلي حيث يناسب. لا تفرض التركيز على عنوان لمجرد تحسين لقطة، واشرح أي تغيير مقصود لإدارة التركيز.
أعد اختبارات للنقر داخل الصفحة وتحميل رابط الجزء مباشرة والرجوع وTab وShift+Tab وتخطيطات 320/390/1440 بكسل CSS. أدرج التكبير ورأسا من سطرين. سجل ظهور الهدف وظهور العنصر ذي التركيز كلّا على حدة. أبق نتائج المتصفح معلقة ما لم ترصد فعلا.اختبر مساري الاستخدام
أولا، انقر رابط قسم ثم افتح رابط الجزء نفسه مباشرة. افحص حافة العنوان العليا بعد استقرار الخطوط والصور ثم استخدم الرجوع. احتفظ بالمعرفات لكي تبقى الروابط المحفوظة مفيدة. الإصلاح الذي يعمل بعد معالج نقر مخصص فقط لم ينجح في حالة الرابط المباشر.
ثانيا، تنقل بين الروابط والأدوات باستخدام Tab وShift+Tab، وتحقق من ظهور العنصر ذي التركيز مع الأغطية العليا والسفلى. لا تستنتج سلوك المفاتيح من لقطة بالفأرة. كرر والشريط مفتوح ومغلق وبعد التكبير. سجل الفشل حسب العرض والحالة ليعالج الإصلاح التالي حالة قابلة للتكرار.
قرارات شائعة
**هل تصلح الحشوة العادية كل الروابط؟** إنها تغير التخطيط؛ محاذاة التمرير تحتاج فحصا منفصلا.
**هل يحتاج كل انتقال إلى JavaScript؟** ابدأ بالروابط الأصلية وCSS عندما يغطيان الحالات الفعلية.
**هل يكفي اختبار سطح مكتب واحد؟** التفاف القائمة والتكبير يغيران المساحة المشغولة.
بعد إصلاح التنقل بين الأقسام، أنشئ صور الحملة في Panelly Studio. أما حركة الانتقال فتعالجها مراجعة تقليل الحركة كسلوك مستقل مرتبط بالتفضيلات.
