$(document).ready(function () {
	// 快取選擇器以避免重複的 DOM 查詢
	var $ganheigh = $(".ganheigh");
	var $scrollbar = $(".scollbar");

	// 取得初始值
	var ganheighTop = $ganheigh.offset().top;
	var ganheighHeight = $ganheigh.height();
	var scrollbarHeight = 0;
	var scrollIncrement = 50.1;
	var lastScrollTop = $(window).scrollTop();

	// 使用 jQuery 的滾動事件處理程序
	$(window).on("scroll", function () {
		var scrollTop = $(window).scrollTop();

		// 計算中心位置
		var thumbCenter = ganheighTop + ganheighHeight / 3;

		if (scrollTop >= thumbCenter) {
			// 根據ganheigh位置計算捲軸高度
			scrollbarHeight = (scrollTop - thumbCenter) / ganheighHeight * ganheighHeight;

			// 根據滾動方向調整高度
			if (scrollTop > lastScrollTop) {
				scrollbarHeight += scrollIncrement;
			} else {
				scrollbarHeight -= scrollIncrement;
			}

			// 將高度限制在 0 和 ganheighHeight 之間
			scrollbarHeight = Math.min(Math.max(scrollbarHeight, 0), ganheighHeight);

			// 更新捲軸高度
			$scrollbar.height(scrollbarHeight);

			// 設定滾動條滑桿的底部位置
			$scrollbar.css("bottom", ganheighTop + ganheighHeight - (ganheighTop + scrollbarHeight) + "px");
		} else {
			// 當捲軸超出ganheigh區域時，降低高度
			scrollbarHeight = Math.max(scrollbarHeight - scrollIncrement, 0);
			$scrollbar.height(scrollbarHeight);

			// 設定滾動條滑桿的底部位置
			$scrollbar.css("bottom", ganheighTop + ganheighHeight - (ganheighTop + scrollbarHeight) + "px");
		}

		lastScrollTop = scrollTop;
	});
});

// 新增媒體查詢來處理行動佈局
$(window).on("resize", function () {
	if ($(window).width() < 480) {
		// 停用行動裝置上的捲軸效果
		$(".scollbar").css("height", "0");
	}
});