Как приклеить изображение внизу в Elementor ⇐ CSS

[Anonymous]

Итак, я использую Elementor, и все настроено на гибкость. У меня есть 2 столбца в контейнере под заголовком.
Левый столбец имеет длинное содержимое. В правом столбце у меня есть фотография человека.
Когда читатель прокручивает страницу вниз, я хочу показать голову человека (относительное положение). Как только изображение достигнет нижней части области просмотра (как показано на рисунке), я хочу, чтобы фотография прикрепилась к нижней части окна, в то время как левый столбец продолжает прокручиваться.
Когда левый столбец достигает нижнего колонтитула, фотография становится липкой и в то же время прокручивается вверх.
Я попробовал встроенную функцию закрепления нижней части окна и оставался в столбце, но это не сработало (я также проверил, нет переполнения проблемы).
Я пробовал несколько настроек CSS или JS через ChatGPT, но ничего не помогло.
Есть идеи?
Ниже показано, что я пробовал до сих пор (было несколько вариантов):

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

document.addEventListener('DOMContentLoaded', function() {
const col = document.querySelector('.person-col'); // right container
const widget = document.querySelector('.person-sticky'); // image widget
const footer = document.querySelector('#site-footer') || document.querySelector('footer');
if (!col || !widget) return;

// Use inner Elementor box if present
const box = widget.querySelector('.elementor-widget-container') || widget;

// Column must anchor absolute positioning
if (getComputedStyle(col).position === 'static') col.style.position = 'relative';

// Keep head aligned to top until we start
box.style.alignSelf = 'flex-start';

function neutralise() {
[box, widget, widget.parentElement, col].forEach(el => {
if (!el) return;
el.classList.remove('elementor-sticky', 'elementor-sticky--active');
el.style.setProperty('top', 'auto', 'important');
});
}

// Placeholder to hold space when box is fixed
const placeholder = document.createElement('div');
placeholder.style.height = box.offsetHeight + 'px';
box.parentNode.insertBefore(placeholder, box);

let mode = 'static'; // 'static' | 'fixed' | 'absolute'
let roPaused = false; // pause ResizeObserver while fixed

function setStatic() {
if (mode === 'static') return;
neutralise();
box.style.position = '';
box.style.left = '';
box.style.right = '';
box.style.bottom = '';
box.style.top = '';
box.style.width = '';
box.style.alignSelf = 'flex-start';
mode = 'static';
}

function setFixed() {
if (mode === 'fixed') return;
neutralise();

// Lock geometry BEFORE changing position to avoid jumps
const rect = box.getBoundingClientRect(); // current on-screen position
const width = rect.width;
const left = rect.left;

roPaused = true; // don't let RO change placeholder during the switch

box.style.position = 'fixed';
box.style.bottom = '0';
box.style.top = 'auto';
box.style.width = width + 'px';
box.style.left = left + 'px';
box.style.right = '';

box.style.alignSelf = ''; // flex alignment no longer applies when fixed
mode = 'fixed';

// Resume after the frame to avoid feedback
requestAnimationFrame(() => {
roPaused = false;
});
}

function setAbsoluteBottom() {
if (mode === 'absolute') return;
neutralise();
box.style.position = 'absolute';
box.style.bottom = '0';
box.style.top = 'auto';
box.style.left = '';
box.style.right = '0';
box.style.width = '';
box.style.alignSelf = '';
mode = 'absolute';
}

// Sentinel at the end of the column
const bottomSentinel = document.createElement('div');
bottomSentinel.style.height = '1px';
col.appendChild(bottomSentinel);

const io = new IntersectionObserver((entries) => {
let bottomVisible = false;
let footerVisible = false;
entries.forEach(e => {
if (e.target === bottomSentinel) bottomVisible = e.isIntersecting;
if (footer && e.target === footer) footerVisible = e.isIntersecting;
});

const viewH = window.innerHeight;
const colRect = col.getBoundingClientRect();
const phRect = placeholder.getBoundingClientRect();

// START: only when the image bottom (placeholder bottom) reaches viewport bottom
if (phRect.bottom >  viewH) {
setStatic();
return;
}

// RELEASE near footer or when the column end is in view
if (footerVisible || bottomVisible || colRect.bottom  {
if (roPaused) return;
placeholder.style.height = box.offsetHeight + 'px';
});
ro.observe(box);

neutralise();
// Kick once in case we're already scrolled
window.dispatchEvent(new Event('scroll'));
});

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

.person-sticky,
.person-sticky .elementor-widget-container {
top: auto !important;
}

.person-sticky {
align-self: flex-start !important;
}

.person-sticky.elementor-sticky,
.person-sticky.elementor-sticky--active,
.person-sticky .elementor-sticky--effects {
position: static !important;
top: auto !important;
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... -elementor