Header scroll shadow

A shadow appears in the header when scrolling through the https://forum.ghost.org/ forum. I see they are using the following CSS.

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

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

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!).

2 Likes

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

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);
  }
}
4 Likes

I am grateful. thank you so much

1 Like

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

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 Like

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.