لقد حاولنا استخدام ميزة “الإشعار العام” الخاصة بك. ولكن للأسف، عند التمرير، يختفي. لذلك، نود أن يكون ثابتًا. وهذا بدوره غير قابل للتحقيق عبر CSS مخصص نظرًا لأنه لا يمكن تطبيق position:sticky إلا على عنصر واحد وهناك بالفعل عنصر ثابت: الرأس.
هل يمكنك جعله قابلاً للتكوين حيث يتم وضع الإشعار في DOM حتى نتمكن من وضعه في حاوية الرأس لجعله ثابتًا أيضًا؟
لماذا لا تستخدم لافتة؟:
شكراً على التوصية، لكن هذا لا يحل المشكلة الموصوفة أعلاه: الإشعار العام ليس ثابتاً وكذلك اللافتة متعددة الاستخدامات. كما وصفت سابقاً، لن يكون من الممكن تحقيق ذلك باستخدام CSS فقط لأن اللافتة متعددة الاستخدامات تستخدم نفس المكان في DOM الذي يستخدمه الإشعار العام، وهو خارج حاوية الرأس الثابت.
نقطة عادلة.
خيار آخر هو إضافة التخطيطات المخصصة، والتي تضيف أشرطة جانبية يمكن تثبيتها. يوجد أيضًا عنصر واجهة مستخدم مخصص لـ HTML يمكنك استخدامه لإضافة أي محتوى تريده.
إذا قمت بتطبيق خاصية “sticky” على الحاوية الأم، فستعمل… ولكن، إذا كانت هناك تنبيهات أخرى في هذه الحاوية، فستلتصق أيضًا (مثل تنبيه “هل تريد إشعارات مباشرة عندما يرد الأشخاص على منشوراتك؟”).
لدينا خاصية CSS ستعوض بشكل صحيح الجزء العلوي من الرأس:
#main-container.container {
position: sticky;
top: var(--header-offset);
z-index: 9;
}