Toggles header visibility.
Installation
npm install hiding-header
How to use
HTML:
<body>
<div class="hidingHeader" id="hidingHeader">
<div class="hidingHeader-in">
<div class="hidingHeader-content">
</div>
</div>
</div>
</body>
CSS:
.hidingHeader {
position: relative;
--hidingHeader-height: auto;
--hidingHeader-scrollCap: 0px;
--hidingHeader-topOffset: 0px;
z-index: 10;
height: calc(
var(--hidingHeader-scrollCap) + var(--hidingHeader-height) - var(--hidingHeader-topOffset)
);
margin-bottom: calc(
var(--hidingHeader-topOffset) - var(--hidingHeader-scrollCap)
);
pointer-events: none;
}
.hidingHeader-in {
position: relative;
position: sticky;
top: 0;
}
.hidingHeader-content {
pointer-events: auto;
}
JavaScript:
import { hidingHeader } from 'hiding-header'
const container = document.querySelector('#hidingHeader')
hidingHeader(container)