I have a sticky header which changes the size (the logo becomes smaller) when the user scroll down the page, for example:
Below the header, there is a list of links which will jump to the respective position when a user click on them. I have added scroll-margin-top for smooth scrolling and to prevent the elements to be "hidden" behind the sticky header. The scroll-margin-top value is perfect when the page is not scrolled, meaning the header still has the original height. It doesn't look "perfect" anymore, as soon as the page is scrolled. The user will see a bit of text from the previous link. I assume this has something to do with the smaller header size.
Does anyone has an idea how I can have a "dynamic" scroll-margin-top value based on the header size? Or is there any other way I can achieve a similar behaviour?
// Sticky header on scroll
// async firstUpdated() {
// await this.updateComplete;
// window.addEventListener('scroll', this.checkSticky, { passive: true });
// window.addEventListener('resize', this.checkSticky);
// }
// disconnectedCallback() {
// window.removeEventListener('scroll', this.checkSticky);
// window.removeEventListener('resize', this.checkSticky);
// }
// checkSticky = async ({ type: eventType }) => {
// if (
// window.pageYOffset > 0
// && (!this.isSticky || eventType === 'resize')
// ) {
// this.isSticky = true;
// window.dispatchEvent(Header.eventIsSticky);
// } else if (
// window.pageYOffset <= 0
// && (this.isSticky || eventType === 'resize')
// ) {
// this.isSticky = false;
// window.dispatchEvent(Header.eventNotSticky);
// }
// }/* Scroll margin top
body * {
scroll-margin-top: 200px
}
*/Thank you very much for your help!