Как запускать скрипт при изменении высоты блока?

Question

[Арсений]

На странице имеется плавающий при скролле блок и несколько спойлеров:

<div class="container" id="js-sticky-container">
	<!-- плавающий блок-->
	<div class="sticky-block">
		<!-- какое-то седержимое плавающего блока-->
	</div>
	<div class="content">
		<div class="spoilers">
			<!-- несколько спойлеров-->
			<div class="spoilers__item">
				<div class="spoilers__item-toggle"></div>
				<div class="spoilers__item-content"></div>
			</div>
			<div class="spoilers__item">
				<div class="spoilers__item-toggle"></div>
				<div class="spoilers__item-content"></div>
			</div>
			<div class="spoilers__item">
				<div class="spoilers__item-toggle"></div>
				<div class="spoilers__item-content"></div>
			</div>
		</div>
	</div>
</div>

Задача проста, чтобы при скролле страницы блок прилипал и плавал - это реализовано и работает, однако у блока - внутри которого есть плавающий элемент постоянно меняется высота из-за находящихся спойлеров, соотвественно нужно инициализировать скрипт для плавающего блока при любом изменении высоты блока .container.

На данный момент попробовал это:

if (document.getElementById('js-sticky-container')) {

    let target = document.getElementById('js-sticky-container');
    let $target = $(target);
    let lastHeight = $target.height();

    let observer = new MutationObserver(() => {
        let newHeight = $target.height();
        if (lastHeight !== newHeight) {
            // тут инициализируется скрипт для плавающего блока

        }
    });

    observer.observe(target, { attributes: true, subtree: true });
}

Данный скрипт работает частично, допустим изначально при загрузке страницы у блока container небольшая высота, поэтому блок sticky-block при скролле не прилипает, и тут пользователь раскрывает один или несколько спойлеров, тогда высоты уже достаточно, скрипт инициализируется и блок прилипает, но когда мы сворачиваем обратно все спойлеры и высота container снова становится недостаточной, чтобы блок sticky-block при скролле прилипал, он всё равно прилипает, хотя не должен, то есть скрипт заново не запустился и не пересчитал свои значения. Как сделать так, чтобы при любом изменении высоты container перезапускать скрипт для плавающего блока?

Answer 1

[Арсений Матыцин]

Если тебе не нужно менять содержимое прилипшего блока, а только делать ему перерасчет, то почему ты не воспользовался обычным position:sticky;?

Comments

[Арсений]

этот блок не всегда прилипший, а только когда мы при скролле страницы доходим до него, и у его родителя (container) высота, достаточная чтобы блок прилипал, и отлипал, когда блок container находится не в поле видимости

[WapSter]

Арсений, так это свойство для этого и нужно.

[Арсений Матыцин]

Арсений, нет, прочитай внимательно спецификацию, крепить можешь хоть к нижней части экрана.

[Арсений]

Арсений Матыцин, WapSter, спасибо! действительно всё работает как надо, до этого тоже пробовал такое позиционирование, но оно не работало, сейчас больше разобравшись нашёл причину - у одного из блоков был overflow:hidden. Просто рукалицо, а не ситуация)