צל כותרת גלילה

Contribute חווית משתמש

סיכום מבוסס בינה מלאכותית

The discussion revolves around implementing a header scroll shadow effect on a Discourse forum, inspired by the official Ghost forum. Muhammed_EKİCİ notes that the effect is achieved using CSS and JavaScript to add a .scrolling class on scroll, but this behavior isn’t default in Discourse. awesomerobot confirms that the class is added via custom JavaScript. Johani provides a solution using IntersectionObserver to add a sticky class when the header becomes fixed, allowing custom styling. Muhammed_EKİCİ expresses gratitude. Later, Muhammed_EKİCİ reports that the code interferes with the PWA application, prompting Johani to request more details on the issue, which Muhammed_EKİCİ clarifies involves the theme header and testing on Ubuntu 20.04, Android 11, and Chrome.

1

A shadow appears in the header when scrolling through the https://forum.ghost.org/ forum. I see they are using the following 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;
}

Scrolling 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;
}

I don’t get the same result when I add the above CSS to my own forum.

2

They’ve added some custom javascript that adds the .scrolling class to the header on scroll, Discourse doesn’t to that by default (it does look nice!).

4 לייקים
3

I would like to have this css class by default. I think it looks very nice too.

4

You can add something like to the header tab of your theme

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

This will add a sticky class to the header wrapper and allows you to set custom css when the header is “stuck” to the top as you scroll

.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

I am grateful. thank you so much

לייק 1
7

I noticed this. This code stops the PWA application from running.

8

I need a few more details to debug this.

Does your PWA application run if you remove the code?
Did you add it to the header tab of your theme?
What device/OS are you using to test this?

לייק 1
9

Yes add theme header. pwa continues to work after removing the code. I tested it on server with Ubuntu 20.04 installed with official installation instructions. on the live site. On Android 11 device and Chrome browser on PC.