This is a pretty hacky styling I made to have the header appear with colour, then fade away transparently, and return on scroll up.
Custom header:
<script>
(function () {
function init() {
if (document.querySelector('.DiscussionPage')) return;
const header = document.querySelector('.App-header, .Header');
if (!header) return;
header.classList.add("header-dark"); // start with white text on coloured bg
let lastScroll = 0;
const fadeLimit = 200;
function update() {
const y = window.scrollY;
// fade overlay
const progress = Math.min(1, y / fadeLimit);
header.style.setProperty('--header-opacity', (1 - progress).toString());
// colour swap
if (progress >= 0.5) {
header.classList.add('header-light');
header.classList.remove('header-dark');
} else {
header.classList.remove('header-light');
header.classList.add('header-dark');
}
// hide on scroll down
if (y > lastScroll && y > 50) {
header.classList.add('header-hide');
} else {
header.classList.remove('header-hide');
}
lastScroll = y;
}
update();
window.addEventListener('scroll', update, { passive: true });
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
</script>
Custom CSS:
:root {
--header-color: #6a71f3;
--fade-height: 200;
--header-height: 70px;
}
.App-header,
.Header {
position: fixed;
inset: 0 0 auto 0;
height: var(--header-height);
z-index: 1200;
display: flex;
align-items: center;
padding: 0 1rem;
background: transparent;
transition: transform 200ms ease, box-shadow 200ms ease;
transform: translateY(0);
}
.header-hide {
transform: translateY(-80px);
}
.App-header::before,
.Header::before {
content: "";
position: absolute;
inset: 0;
background: var(--header-color);
opacity: var(--header-opacity, 1);
pointer-events: none;
transition: opacity 150ms linear;
z-index: -1;
}
.header-light a,
.header-light .Button,
.header-light .Header-title {
color: #000 !important;
}
.header-dark a,
.header-dark .Button,
.header-dark .Header-title {
color: #fff !important;
}
.Header-title,
.Header-controls,
.Search-input {
transition: opacity 150ms linear, transform 180ms ease;
}
.header-hide .Header-title,
.header-hide .Header-controls,
.header-hide .Search-input {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
body {
background: #ffffff;
}
You will need to edit your background and chosen colours to match your theme. You can also edit the fade-height and header-height to adjust the animation speed to your liking.
