مشكلة الصور الرمزية الثابتة

[Edward_Hibbert]

لدينا سمة مخصصة، والرأس يتقلص أثناء التمرير. نعتقد أن ميزة صور الـ stick التي تم دمجها مؤخرًا تسبب سلوكًا مضطربًا بمجرد تقلص الرأس. شاهد الفيديو المرفق:

لقد حاولت تعطيل صور الـ stick باستخدام CSS الذي وجدته في https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll:

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* قد تكون مطلوبة في بعض الحالات */
    }
}

هذا يخفي صورة الـ stick، ولكنه لا يبدو أنه يساعد في الاضطراب. هل هناك شيء آخر يجب أن أفعله لجعل هذا يعمل، أو لتعطيل الميزة بالكامل؟

أنا لست متأكدًا بنسبة 100٪ أن هذا هو تغيير صور الـ stick - لذا يرجى التعليق إذا كنت تعتقد أنه قد يكون شيئًا آخر.

يمكن إعادة إنتاج المشكلة في Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community. Chrome هو الأفضل لإعادة الإنتاج فيه - يبدو أن Firefox يقمع الخطأ بعد حدوثه لأول مرة.

[awesomerobot (Kris)]

أعتقد أن المشكلة لا تتعلق بالصور الرمزية اللاصقة.

عندما يتقلص الرأس، تصبح الصفحة أقصر، ويتغير موضع التمرير للصفحة. لذا ما يحدث هو أنك تحصل على هذا الوميض حيث تقفز الصفحة للخارج والداخل من الموضع الذي يجب أن يتقلص فيه الرأس.

إذا قمت بإخراج موضع التمرير للصفحة إلى وحدة تحكم المتصفح الخاصة بي، يمكنك رؤية ذلك أثناء العمل… يتقلص الرأس بمقدار 60 بكسل تقريبًا، وينعكس ذلك في موضع التمرير أثناء وميضه:

لحل هذه المشكلة في جافاسكريبت، أعتقد أنه يمكنك إضافة فرق الارتفاع إلى موضع التمرير في نفس الوقت الذي يحدث فيه انتقال الرأس؟

طريقة أخرى لحل هذه المشكلة باستخدام CSS فقط ستكون:

.d-header-wrap {
  // هذا يجعل موضع الرأس ثابتًا، لذا فهو ليس جزءًا من ارتفاع الصفحة
  position: fixed;
  width: 100%;
}

#main-outlet {
  // هذا يعوض محتوى الصفحة بارتفاع الرأس الكبير
  // مطلوب لأن الموضع الثابت يضع الرأس فوق المحتوى
  padding-top: 150px !important;
}

[Edward_Hibbert]

شكراً جزيلاً، هذا الـ CSS يصلحه بالفعل. لطف كبير.