fix : 쇼핑몰 구독서비스 스크롤 상단바 추가

src/main/webapp/WEB-INF/views/sopmal/main/SubscribeR.jsp

@@ -16,6 +16,7 @@
 
 <head>
 	<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
+	<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
 	<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
 </head>
 
@@ -23,12 +24,14 @@
 	$(document).ready(function() {
 		var subsvcInnb = $('#subsvcInnb').val();
 		fn_select_subsvcDetail(subsvcInnb);
+		fn_scroll_event();
 	});
 
 	/******************************************************
 	 *  구독서비스 상세 조회
 	 * ****************************************************/
 	const fn_select_subsvcDetail = function(subsvcInnb) {
+		var cdnurl = '${cdnurl}';
 		var curUnit = '${curUnit}';
 
 		$.ajax({
@@ -49,15 +52,23 @@
 				$('#dscntRaito').text(data.dscntRaito + '%');
 				$('#subsvcDc').html(data.subsvcDc);
 
+				$("#fixedImg").attr("src", cdnurl + data.img);
+				$('#fixedTitle').text(data.subsvcConcatNm);
+				$('#fixedPrice').text(fn_format_number(data.selpric));
+
 				switch (data.subsvcSttusCd) {
 					case '01':
 						$('#subscribeBtn').text('구독하기');
 						$('#subscribeBtn').prop('disabled', false);
+						$('#fixedButton').text('구독하기');
+						$('#fixedButton').prop('disabled', false);
 						break;
 					case '02':
 					case '03':
 						$('#subscribeBtn').text(data.subsvcSttus);
 						$('#subscribeBtn').prop('disabled', true);
+						$('#fixedButton').text(data.subsvcSttus);
+						$('#fixedButton').prop('disabled', true);
 						break;
 					default:
 						break;
@@ -69,6 +80,47 @@
 	const fn_format_number = function(number) {
 		return Number(number).toLocaleString();
 	}
+
+	/*************************************************************
+	 탭, 스크롤 이벤트
+	 **************************************************************/
+	const fn_scroll_event = () => {
+		function handleTabScroll() {
+			var scrollTop = $(window).scrollTop();
+			var fixedTabHeight = 100;
+			var initialProductDetailTop = $('#subsvcDc').offset().top;
+
+			var threshold = initialProductDetailTop - fixedTabHeight;
+
+			if (scrollTop > threshold) {
+				if (!$(".productDetailTab").hasClass("fixed")) {
+					$(".productDetailTab").addClass("fixed");
+					$(".fixedProduct").addClass("fixed");
+					$('#subsvcDc').css("margin-top", 62 + "px");
+				}
+			} else {
+				if ($(".productDetailTab").hasClass("fixed")) {
+					$(".productDetailTab").removeClass("fixed");
+					$(".fixedProduct").removeClass("fixed");
+					$('#subsvcDc').css("margin-top", "");
+				}
+			}
+		}
+
+		var debounce = function (func, delay) {
+			var timer;
+			return function () {
+				var context = this,
+						args = arguments;
+				clearTimeout(timer);
+				timer = setTimeout(function () {
+					func.apply(context, args);
+				}, delay);
+			};
+		};
+
+		$(window).scroll(debounce(handleTabScroll, 20));
+	}
 </script>
 <style>
 	.container {
@@ -112,6 +164,10 @@
 		border: 1px solid #e9ecef;
 		padding: clamp(12px, 3%, 18px);
 	}
+
+	.productDetailTab.fixed {
+		height: 100px;
+	}
 </style>
 <body>
 <%-- 공통 Header --%>
@@ -167,7 +223,25 @@
 						<span style="display: block; width: 100%; text-align: center; font-size: 32px;">구독 서비스 상품 준비중</span>
 					</c:otherwise>
 				</c:choose>
-
+				<div class="productDetailTab">
+					<div class="fixedProduct">
+						<div class="fixedProduct__left">
+							<div class="fixedProduct__image">
+								<img id="fixedImg" alt="상품이미지" onerror="this.src='/pc/images/image_placeholder.png'">
+							</div>
+							<div class="fixedProduct__product">
+								<p id="fixedTitle" class="fixedProduct__title">상품명</p>
+								<span class="fixedProduct__price">
+                                    <span id="fixedPrice" class="comma">상품가격</span>
+                                    <span class="priceUnit"></span><span class="priceUnit">${curUnit}</span>
+                                </span>
+							</div>
+						</div>
+						<div class="fixedProduct__right">
+							<button type="button" id="fixedButton" class="btn theme lg purchsOrdr">구독하기</button>
+						</div>
+					</div>
+				</div>
 				<div id="subsvcDc" class="ck-content">구독 서비스 상품 설명</div>
 			</form>
 		</div>