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