@Arsenij00

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

На странице имеется плавающий при скролле блок и несколько спойлеров:
<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 перезапускать скрипт для плавающего блока?
  • Вопрос задан
  • 127 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Если тебе не нужно менять содержимое прилипшего блока, а только делать ему перерасчет, то почему ты не воспользовался обычным position:sticky;?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 18:19
20000 руб./за проект
29 мар. 2024, в 18:08
2500 руб./за проект
29 мар. 2024, в 17:51
40000 руб./за проект