Tengo un elemento div que está configurado como 'pegajoso' en la parte superior de su div principal. El div principal está dentro de un div que está escalado. Si bien todo funciona como se espera si la escala se establece en 1, el elemento adhesivo no se adhiere si la escala se establece en valores distintos de 1, como 1,5 o 0,5.
Por favor vea el código aquí:
.scale { height: unset; transform: scale(1.5); transform-origin: left top; width: calc(66.6667%); } .container { height: 1200px; border: 1px solid; } .sticky { position: sticky; top: 0; z-index: 1; background: red; } <html> <body> <div class='scale'> <div class='container'> <div class='sticky'> I should stick to top </div> </div> <div>Other parts needed to scale</div> </div> </body> </html>Si configuramos la escala en 1.5 (transformar: escala (1.5)), el elemento adhesivo se mueve hacia abajo a medida que me desplazo por la página. Si configuro la escala en 0.5, simplemente se desplazará fuera de la pantalla. Si se establece en 1, todo funciona bien.
Me pregunto cómo mantener tanto el 'pegajoso' como la 'escala' funcionando en este escenario. ¡Gracias por cualquier ayuda!
El problema es que está escalando el div principal, si usa 1 como escala, entonces el div pegajoso se moverá en una proporción de 1: 1
1.5 como escala tendrá una relación de 1.5: 1, por lo que cuando se desplace 100 px, el div fijo se moverá 150 px, haciéndolo bajar
0.5 como escala será 0.5: 1, por lo que se moverá 50 px si se desplaza hacia abajo 100 px, haciendo que parezca que se está moviendo hacia arriba