عندما يكون مكون السمة header submenus نشطًا، تختفي الأيقونات الموجودة في أسفل الشريط الجانبي من الشاشة.
ربما هناك نوع من حساب CSS يسير في الاتجاه الخاطئ؟
4 إعجابات
لا يتم تضمين رؤوس التذييل المخصصة في الحساب على الإطلاق، ويمكن تكرار ذلك عن طريق إضافة أي محتوى إلى قسم header في سمة.
يأخذ الحساب الذي نستخدمه لشريط التمرير والدردشة في الاعتبار ارتفاع رأس Discourse ويضبط --header-offset كمتغير عند حساب بعض الارتفاعات.
قد يكون تضمين رؤوس التذييل المخصصة صعبًا بعض الشيء لأن محتوى رأس التذييل المخصص لا يلتصق عند التمرير افتراضيًا مثل رأس Discourse… لذلك إذا قمنا بتضمينه في الحساب افتراضيًا، بمجرد التمرير واختفاء رأس التذييل المخصص، يصبح الارتفاع غير صحيح.
لذلك، على سبيل المثال، إذا قمت بزيادة --header-offset يدويًا بمقدار ارتفاع رأس التذييل المخصص الخاص بي (يبلغ حوالي 60 بكسل افتراضيًا)، تحصل على فجوة فوق شريط التمرير عند التمرير:
نضيف فئة .docked إلى body بمجرد تمرير رأس تذييل مخصص خارج العرض، لذلك من الممكن استخدام هذا… وهو أفضل، ولكن هناك انتقال ملحوظ حيث يتم تعديل ارتفاع شريط التمرير بين الحالات… هذا لأن .docked إما قيد التشغيل أو متوقف.
إذا كنت تريد رأس تذييل ثابتًا، فهذا أسهل قليلاً للتعامل معه… لأنه يمكنك زيادة --header-offset بمقدار ارتفاع رأس التذييل المخصص، ثم تعيين قيمة top لـ .d-header-wrap كارتفاع رأس التذييل المخصص:
أحد الحلول التي تخطر ببالي لتحسين حالة رأس التذييل غير الثابت هو:
- التحقق من ارتفاع رأس التذييل المخصص
- تضمين ارتفاع رأس التذييل المخصص في
--header-offset - تقليل ارتفاع رأس التذييل المخصص المستخدم في حساب
--header-offsetبناءً على موضع التمرير. سيؤدي هذا إلى تعديل ارتفاع شريط التمرير تدريجيًا بطريقة لا يمكن لفئة.dockedالقيام بها.
قد يتطلب الأمر بعض التجريب للحصول عليه بشكل صحيح…
5 إعجابات
هذا مفيد جداً، شكراً لك @awesomerobot
(تم نقل هذا إلى UX)
4 إعجابات
تم تنفيذ هذا هنا (شكر كبير لـ @david):
يجب أن يحل هذا مشاكل الشريط الجانبي والدردشة وبعض المشكلات الأخرى المتعلقة بمحتوى الرأس المخصص.
4 إعجابات