Merge remote-tracking branch 'origin/ST24PRJ-705' into develop

src/main/webapp/ux/pc/css/layout.css

@@ -2629,7 +2629,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_detail .area_desc .desc_wrap .benefit_box dl div dd .btn_popup {position:absolute; right:0; top:0; z-index:2;}
 
 	/* pd_deal_상품옵션선택 영역 */
-	.pd .option_box {margin-top:30px;}
+	.pd .option_box {margin-top:30px;overflow-y: auto;height: calc(100% - 35%);} /* 0126 */
 	.option_box > [class^="opt_"] {padding-top:40px;}
 	.option_box > [class^="opt_"]:first-of-type {padding-top:0;}
 	.option_box > [class^="opt_"] .opt_header {position: relative; margin-bottom:20px;}
@@ -2900,7 +2900,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd.deal ul::after {content:''; clear:both; display:block;}
 	.pd.deal .tab_detail_nav {position:relative; width:100%; height:60px; padding-bottom:60px; box-sizing:initial;}
 	.pd.deal .tab_detail_nav ul {position:absolute; left:0; top:0; width:100%; height:70px; background: #ffffff; z-index:2;}
-	.pd.deal .tab_detail_nav.fix ul {position:fixed; left:70px; top:80px; min-width:760px; width:calc(100% - 700px); max-width:1200px; z-index:25;}
+	.pd.deal .tab_detail_nav.fix ul {position:fixed; left: auto; top:80px; min-width:760px; width:calc(100% - 700px); max-width:1200px; z-index:25;} /* 0126 */
 	.pd.deal .tab_detail_nav ul li {float:left; width:25%;}
 	.pd.deal .tab_detail_nav ul li a {display:block; padding:22px 0px 18px; color:#888; font-size:18px; text-align:center; background:#f5f5f5; border:1px solid #f5f5f5; border-bottom-color:#222; box-sizing:border-box;}
 	.pd.deal .tab_detail_nav ul li.active a {border:1px solid #222; border-bottom-color:#fff; color:#222; font-weight:300; background:#fff;}
@@ -2938,14 +2938,22 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_desc_wrap .item_descrp .area_list::after {content:''; position:absolute; right:-62px; top:0; bottom:0; width:1px; height:100%; background:#ddd; z-index:2;}
 	.pd_desc_wrap .item_descrp .area_option {float:right;}
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap {width:500px; padding-left:60px; padding-top:30px;}
-	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right:70px; bottom:80px; width:500px;height: calc(100% - 11%);}
+	/* 0126 */
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right: auto; left: 50%; margin-left: 380px; bottom:80px; width:500px;height: calc(100% - 11%);}
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop .option_box {overflow-y: auto; height: calc(100% - 25%);}
-	.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:absolute; top:auto; bottom:0px; right:70px;}
-	@media screen and (max-width:1459px) {
-		.pd.deal .tab_detail_nav.fix ul {position:absolute; left:0; top:0; width:100%; height:60px; z-index:25;}
-		.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop,
-		.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:relative; top:auto; bottom:auto; right:auto;}
-	}
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:absolute; top:auto; bottom:0px; right:70px;height: calc(100% - 21%);}
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixbottom {position: absolute;top: auto;bottom: 0;right: auto;left: 50%;margin-left: 380px;}
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixbottom .option_box {overflow-y: auto; }
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap ,
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixbottom {height: 1000px;}
+	/* 0126 */
+
+@media screen and (max-width:1459px) {
+    .pd.deal .tab_detail_nav.fix ul {position:absolute; left:0; top:0; width:100%; height:60px; z-index:25;}
+    .pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop,
+    .pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:relative; top:auto; bottom:auto; right:auto; left: auto; margin-left: 0;} /* 0126 */
+
+}
 
 	.pd_desc_wrap .btn_box .ui_row {margin-bottom: 0;}
 	.pd_desc_wrap .btn_box .ui_row [class^='ui_col_']:first-child {margin-right: 0;}

src/main/webapp/ux/pc/js/common-ui.js

@@ -576,9 +576,13 @@ $(document).ready( function() {
 		var secondFixed_right2 =  firstFixed + $('.pd_detail').outerHeight() - $(window).outerHeight();
 
 		var pdDetail_t = firstFixed + $('.pd_detail').outerHeight() + 100;
+		var pdDDetail_t = firstFixed + $('.pd_deal_detail').outerHeight() + 100; // 0126
 		var pdDescWrap_t = pdDetail_t + $('.pd_desc_wrap').outerHeight();
+		var pdDDescWrap_t = pdDDetail_t + $('.pd_desc_wrap').outerHeight() + 500; // 0126
 		var optionFixed_right =  pdDetail_t + $('.pd_desc_wrap').outerHeight() - $('.area_option .opt_wrap').outerHeight();
 
+		var optionFree = scrollTop - pdDDescWrap_t; // 0126
+
 		/* 좌측 상품썸네일 navi 고정 */
 		if (scrollTop > firstFixed){  
 			$('.pd_detail .area_pic .thumb_nav_wrap').removeClass('fixbottom').addClass('fixtop');
@@ -600,6 +604,10 @@ $(document).ready( function() {
 		if (thumbListWrap_h > descWrap_h && scrollTop > secondFixed_right2) {
 			$('.pd_detail .area_desc .desc_wrap').removeClass('fixbottom').addClass('absbottom');
 		}
+		// 220124 추가
+		else if(thumbListWrap_h < descWrap_h && scrollTop < secondFixed_right2) {
+			$('.pd_detail .area_desc .desc_wrap').removeClass('fixbottom').removeClass('absbottom');
+		}
 
 		/* 딜 - 상세정보 탭 고정 */
 		if (scrollTop > pdDetail_t && scrollTop < pdDescWrap_t){
@@ -608,15 +616,19 @@ $(document).ready( function() {
 			$('.tab_detail_nav').removeClass('fix');
 		}
 
-		/* 딜 - 우측옵션 고정 */
+		/* 딜 - 우측옵션 고정 */ /* 0126 */
 		if (scrollTop > pdDetail_t){
-			$('.area_option .opt_wrap').removeClass('absbottom').addClass('fixtop');
+			$('.area_option .opt_wrap').removeClass('absbottom').removeClass('fixbottom').addClass('fixtop');
+			if (scrollTop > pdDDescWrap_t || optionFree == optionFixed_right){
+				$('.area_option .opt_wrap').removeClass('fixtop').addClass('fixbottom');
+			}
 		} else if (scrollTop < pdDetail_t) {
-			$('.area_option .opt_wrap').removeClass('fixtop');
-		}		
-		if (scrollTop > optionFixed_right){
-			$('.area_option .opt_wrap').removeClass('fixtop').addClass('absbottom');
+			$('.area_option .opt_wrap').removeClass('fixtop').removeClass('fixbottom');
 		}
+		// 0126제거
+		// if (scrollTop > optionFixed_right){
+		// 	$('.area_option .opt_wrap').removeClass('fixtop').addClass('absbottom');
+		// }
 
 	});