いい感じに

src/web/app/desktop/scripts/scroll-follower.ts

@@ -0,0 +1,57 @@
+/**
+ * 要素をスクロールに追従させる
+ */
+export default class ScrollFollower {
+	private follower: Element;
+	private containerTop: number;
+	private topPadding: number;
+
+	constructor(follower: Element, topPadding: number) {
+		//#region
+		this.follow = this.follow.bind(this);
+		//#endregion
+
+		this.follower = follower;
+		this.containerTop = follower.getBoundingClientRect().top;
+		this.topPadding = topPadding;
+
+		window.addEventListener('scroll', this.follow);
+		window.addEventListener('resize', this.follow);
+	}
+
+	/**
+	 * 追従解除
+	 */
+	public dispose() {
+		window.removeEventListener('scroll', this.follow);
+		window.removeEventListener('resize', this.follow);
+	}
+
+	private follow() {
+		const windowBottom = window.scrollY + window.innerHeight;
+		const windowTop = window.scrollY + this.topPadding;
+
+		const rect = this.follower.getBoundingClientRect();
+		//const followerHeight = rect.height + this.containerTop;
+		const followerBottom = (rect.top + window.scrollY) + rect.height;
+
+		// スクロールの上部(+余白)がフォロワーコンテナの上部よりも上方にある
+		if (window.scrollY + this.topPadding < this.containerTop) {
+			// フォロワーをコンテナの最上部に合わせる
+			(this.follower.parentNode as any).style.marginTop = '0px';
+			return;
+		}
+
+		// スクロールの下部がフォロワーの下部よりも下方にある かつ 表示領域の縦幅がフォロワーの縦幅よりも狭い
+		if (windowBottom > followerBottom && rect.height > (window.innerHeight - this.topPadding)) {
+			// フォロワーの下部をスクロール下部に合わせる
+			const top = (windowBottom - rect.height) - this.containerTop;
+			(this.follower.parentNode as any).style.marginTop = `${top}px`;
+		// スクロールの上部(+余白)がフォロワーの上部よりも上方にある または 表示領域の縦幅がフォロワーの縦幅よりも広い
+		} else if ((windowTop < rect.top + window.scrollY || rect.height < (window.innerHeight - this.topPadding))) {
+			// フォロワーの上部をスクロール上部(+余白)に合わせる
+			const top = windowTop - this.containerTop;
+			(this.follower.parentNode as any).style.marginTop = `${top}px`;
+		}
+	}
+}