ظل تمرير الرأس

ساهم تجربة المستخدم
1

يظهر ظل في الرأس عند التمرير عبر منتدى https://forum.ghost.org/. أرى أنهم يستخدمون CSS التالي.

Screenshot_1
Screenshot_11480×116 9.49 KB

.d-header {
    height: 56px;
    padding: 0;
    border-bottom: 1px solid #e5eff5;
    background: rgba(255,255,255,0.97);
    box-shadow: none;
    transition: all 0.4s ease;
}

CSS التمرير;

Screenshot_2
Screenshot_21453×231 31.7 KB

.d-header.scrolling {
    box-shadow: 8px 14px 38px rgb(39 44 49 / 4%), 1px 3px 8px rgb(39 44 49 / 4%);
    transition: all 0.2s ease;
}

لا أحصل على نفس النتيجة عند إضافة CSS أعلاه إلى منتداي الخاص.

2

لقد أضافوا كود جافاسكريبت مخصصًا يضيف فئة .scrolling إلى الرأس أثناء التمرير، ولا يقوم Discourse بذلك افتراضيًا (لكنه يبدو جميلًا!).

4 إعجابات
3

أود أن يكون هذا التصنيف CSS افتراضيًا. أعتقد أنه يبدو جميلًا جدًا أيضًا.

4

يمكنك إضافة شيء مشابه إلى تبويب الرأس في نسختك

<div class="header-anchor"></div>

<script type="text/discourse-plugin" version="0.8">
if (!"IntersectionObserver" in window) return;

const { on } = require("discourse-common/utils/decorators");

const stickyClass = "sticky";

api.modifyClass("component:site-header", {
  @on("didInsertElement")
  stickyHeaderCheck() {
    const anchor = document.querySelector(".header-anchor");
    const header = this.element;

    new IntersectionObserver(entries => {
      if (!entries[0].isIntersecting) {
        header.classList.add(stickyClass);
      } else {
        header.classList.remove(stickyClass);
      }
    }).observe(anchor);
  }
});
</script>

سيؤدي هذا إلى إضافة فئة sticky إلى غلاف الرأس ويسمح لك بتعيين CSS مخصص عندما يكون الرأس “ملتصقًا” بالأعلى أثناء التمرير

.d-header {
  box-shadow: none;
  transition: box-shadow 0.3s ease-in-out;
  will-change: box-shadow;
  .sticky & {
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  }
}
5 إعجابات
Logo in docked header bar
"docked" in <body> always present?
5

أنا ممتن. شكرًا جزيلاً لك

إعجاب واحد (1)
7

لقد لاحظت ذلك. هذا الكود يوقف تشغيل تطبيق PWA.

8

أحتاج إلى بعض التفاصيل الإضافية لتصحيح هذا.

هل يعمل تطبيق PWA الخاص بك إذا قمت بإزالة الكود؟
هل قمت بإضافته إلى علامة التبويب header في نسختك؟
ما هو الجهاز/نظام التشغيل الذي تستخدمه لاختبار هذا؟

إعجاب واحد (1)
9

نعم، أضف رأس الموضوع. يستمر عمل PWA حتى بعد إزالة الكود. قمت باختباره على خادم مثبت عليه Ubuntu 20.04 وفقًا لإرشادات التثبيت الرسمية، وعلى الموقع المباشر، وعلى جهاز يعمل بنظام Android 11 ومتصفح Chrome على جهاز الكمبيوتر.