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!).
4 Likes
I would like to have this css class by default. I think it looks very nice too.
Johani
July 24, 2021, 9:38pm
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 Likes
I am grateful. thank you so much
1 Like
I noticed this. This code stops the PWA application from running.
Johani
July 25, 2021, 9:43pm
8
I need a few more details to debug this.
Does your PWA application run if you remove the code?header tab of your theme?
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.
