//position: sticky;で指定エリア内に要素を追従させ積み重ねる関数
const areaStacking = () => {
	//エリアチェック
	const areas = document.querySelectorAll('.js-stacking__area');
	if(areas.length === 0) {
		return;
	}

	//追従チェック関数
	const checkPosition = targets => {
		//ブロックごとの高さを取得
		const height = [];
		targets.forEach(target => {
			target.style.paddingTop = '';
			target.style.paddingBottom = '';
			height.push(target.offsetHeight);
		});
		const heightLen = height.length;

		//高さを設定
		targets.forEach((target, index) => {
			//ブロックのtop位置設定
			let topHeight = 0;
			if(index === 1) {
				topHeight = height[0];

			} else if(index > 1) {
				topHeight = height.slice(0,index);
				topHeight = topHeight.reduce((a, x) => a + x);
			}
			target.style.paddingTop = topHeight + 'px';

			//ブロックのbottom位置設定
			let bottomHeight = 0;
			if(index !== heightLen - 1) {
				bottomHeight = height.slice(index+1,heightLen);
				bottomHeight = bottomHeight.reduce((a, x) => a + x);
				target.style.paddingBottom = bottomHeight + 'px';
			}
		});
	}

	areas.forEach(area => {
		//エリア内に追従要素が存在する場合のみ処理する
		const targets = area.querySelectorAll('.js-stacking__item');
		if(targets.length > 0) {
			checkPosition(targets);

			/*
				レスポンシブ対応
			*/
			//表示エリアリサイズ監視 ResizeObserver
			const resizeObserver = new ResizeObserver(() => {
				checkPosition(targets);
			});
			//リサイズ監視開始
			resizeObserver.observe(area);
		}
	});

};
areaStacking();