Как обеспечить, чтобы адаптивное изображение оставалось сверху в макете «текст-изображение» при прокрутке? ⇐ CSS

[Anonymous]

Я разрабатываю веб-страницу с текстом слева и сопроводительным изображением справа. По мере прокрутки пользователем изображение динамически корректируется в зависимости от связанного с ним текста. Хотя макет на рабочем столе работает гладко, я сталкиваюсь с проблемами, связанными с тем, чтобы изображение оставалось липким и располагалось сверху в адаптивном режиме. В настоящее время, когда размер экрана уменьшается, изображение смещается под текст. Ниже приведен код, с которым я работаю:

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const artwork = document.getElementById('artwork');
const sections = document.querySelectorAll('.content-section');
const screenWidth = window.innerWidth; // Get screen width

const transformations = [
{ scale: 1, translateX: 0, translateY: 0 },        // Section 1
{ scale: 2.2, translateX: 60, translateY: -30 },  // Section 2
{ scale: 1.5, translateX: 20, translateY: 80 }, // Section 3
{ scale: 2, translateX: -100, translateY: -200 }  // Section 4
];

const scrollHandler = () => {
const scrollPosition = window.scrollY + window.innerHeight / 2;

sections.forEach((section, index) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;

if (scrollPosition > sectionTop && scrollPosition < sectionTop + sectionHeight) {
const transform = transformations[index];
artwork.style.transform = `scale(${transform.scale}) translate(${transform.translateX}px, ${transform.translateY}px)`;

// Hide text on small screens
if (screenWidth 

Подробнее здесь: [url]https://stackoverflow.com/questions/78496569/how-to-ensure-responsive-image-stays-on-top-in-a-text-image-layout-while-scrolli[/url]