Kia ora.

Estoy trabajando en un sitio hostd de Salesforce CMS, usando componentes web lightnign.

Uno de mis componentes es un "anuncio pegajoso". Se encuentra en la parte inferior de una columna y está relativamente posicionado, hasta que nos desplazamos más allá de él, luego se vuelve fijo hasta que se desplaza hacia arriba más allá de su posición y original.

Ese es el resultado previsto, sin embargo, inicialmente el código verificó su posición inicial y una vez cuando el usuario se desplaza por primera vez y luego mantiene ese número por el resto de la vida útil de los componentes. Sin embargo, si el usuario se desplaza antes de que todos los elementos de la página se hayan cargado, este valor y puede ser incorrecto, lo que hace que el componente se repare mucho antes de que realmente nos desplacemos hacia él y cubra los elementos que se encuentran sobre él. además, los elementos de arriba a veces cambian de tamaño, lo que provoca el mismo problema.

Tengo una solución, pero se siente extraña y no es la ideal... aquí hay algunos fragmentos de código:

 <template> <div class='placeholder'> <div class='container'> <template if:true={readyToDisplay}> {displayAd} </template> </div> </div> </template>

js parciales:

 _onScroll() { if (this.stickyAd) { // reduce performance cost by only checking positon every 10 scrolls. if (this._scrollCounter < 10){ this._scrollCounter++; } else { this._scrollCounter = 0; // check position of empty placeholder div that stays relative const placeholder = this.template.querySelector('div.placeholder'); this._startContainerPosition = this._findPositionY(placeholder); } const container = this.template.querySelector('div.container'); // if the scrollY is greater than the position, fixed the ad, otherwise leave it as relative if (scrollY > this._startContainerPosition) { container.style.minWidth = `${container.clientWidth}px`; container.style.position = 'fixed'; container.style.zIndex = 10; container.style.top = '20px'; } else { container.style.position = 'relative'; } }

}

Como puede ver, lo que he hecho es hacer que la posición y se actualice cada décimo desplazamiento en lugar de solo en el desplazamiento inicial. (Lo tenía en cada pergamino pero eso causa tartamudeo).

También agregué un contenedor div de "marcador de posición" que siempre es relativo, ya que verificar la posición y de los contenedores mientras está fijo también eliminaría el valor y y causaría un comportamiento no deseado.

Lo que imagino que es la solución correcta es tener un oyente que pueda decirle a mi componente cuándo cambia el sitio y actualizar el valor y entonces y solo el. es posible? ¿O hay una solución aún mejor que me estoy perdiendo?

Espero que todo esto tenga sentido, gracias, Andrew.