Tengo un encabezado adhesivo que cambia el tamaño (el logotipo se vuelve más pequeño) cuando el usuario se desplaza hacia abajo en la página, por ejemplo:

• altura del encabezado sin desplazamiento: 200px
• altura del encabezado con desplazamiento: 100px

Debajo del encabezado, hay una lista de enlaces que saltarán a la posición respectiva cuando un usuario haga clic en ellos. Agregué scroll-margin-top para un desplazamiento suave y para evitar que los elementos se "oculten" detrás del encabezado adhesivo. El valor scroll-margin-top es perfecto cuando la página no se desplaza, lo que significa que el encabezado aún tiene la altura original. Ya no se ve "perfecto", tan pronto como se desplaza la página. El usuario verá un poco de texto del enlace anterior. Supongo que esto tiene algo que ver con el tamaño de encabezado más pequeño.

¿Alguien tiene una idea de cómo puedo tener un valor superior de margen de desplazamiento "dinámico" basado en el tamaño del encabezado? ¿O hay alguna otra forma en que pueda lograr un comportamiento similar?

 // 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 } */

¡Muchas gracias por su ayuda!