شعار في شريط الرأس المثبت

الدعم
1

في منتدياتنا، نستخدم ترويسة إضافية فوق شريط ترويسة Discord. حتى الآن، استخدمنا بعض CSS لإخفاء الشعار من شريط الترويسة هذا حيث استخدمنا شعارًا إضافيًا في ترويستنا (الإضافية).\n\nهذا هو الكود الذي استخدمناه:\n\n```\n.d-header #site-logo.logo-big { display: none; }\n.docked .d-header #site-logo.logo-big { display: inline; }\n````\n\nتمت إضافة .docked كفئة إلى حاوية الترويسة بمجرد أن لامست الترويسة الطرف العلوي من منفذ العرض. يبدو أن هذا السلوك قد تغير مع Beta 10 أو 11.\n\nهل يقوم أي شخص بأشياء مماثلة ولديه حل بديل لذلك؟ على حد علمي، لا يوجد شيء يساعدني حقًا في القيام بشيء كهذا باستخدام CSS. لاحظت خاصية --header-offset على وسم html ولكنني لست متأكدًا مما إذا كان يمكن استخدامها لهذا النوع من الأشياء.\n\nأي أفكار مرحب بها :wink:

2

مرحباً

أعتقد أنه يمكنك استخدام الحل الرائع لـ @Johani لهذا الغرض.

شيء كهذا :arrow_double_down:

قم بإنشاء مكون جديد وأضف ما يلي.

قسم الرأس

<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>

قسم CSS

.d-header {
  #site-logo.logo-big {
    display: none;
  }
  .sticky & {
    #site-logo.logo-big {
      display: inline;
    }
  }
}

سيؤدي هذا إلى إخفاء الشعار في الأعلى وإظهاره فقط عند التمرير.

إعجابَين (2)
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.