Hello
I think you can use for this @Johani 's fantastic solution.
Something like this
Create a new component and add the following.
Header section
<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 section
.d-header {
#site-logo.logo-big {
display: none;
}
.sticky & {
#site-logo.logo-big {
display: inline;
}
}
}
This will hide the logo on top and only show when you scrolling.