2606_UIUX_2 수정 내역

html/MA-003_main.html

@@ -8885,6 +8885,17 @@ K2 시원서커</h3>
                         left: 0;
                         z-index: 10;
                         width: 100%;
+                        background-color: #fff;
+                    }
+                    .brand_menu .menu_top::after {
+                        content: '';
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        bottom: -1px;
+                        height: 1px;
+                        background-color: #fff;
+                        pointer-events: none;
                     }
                     .brand_menu .menu_top > div {
                         width: auto;
@@ -14927,6 +14938,10 @@ K2 시원서커</h3>
                     var isNavClickScrolling = false;
                     var isCateNavClickScrolling = false;
 
+                    function getBrandMenuTopHeight() {
+                        return $('#brdNavList .brand_menu .menu_top').outerHeight() || menutop || 0;
+                    }
+
                     // 스크롤시 네비 활성화
                     $('.category-pop .scroll').on('scroll', function () {
                         var tabCheck = $('.category-pop .gnb li.on').attr('id');
@@ -15008,7 +15023,8 @@ K2 시원서커</h3>
 
                     });
 
-                    $('.category-pop .bnd .filter_btn_wrap button').on('click', function(){
+                    $('.category-pop .bnd .filter_btn_wrap button').on('click', function(e){
+                        e.preventDefault();
                         var filterBtn = $(this).text();
                         if(filterBtn == 'ALL') {
                             $(this).toggleClass('on').siblings().removeClass('on');
@@ -15030,7 +15046,7 @@ K2 시원서커</h3>
                                 $allBtn.addClass('on');
                             }
                         }
-                        applyBrandFilters();
+                        applyBrandFilters(getBrandMenuTopHeight());
 
                     });
 
@@ -15071,12 +15071,9 <h2>Today Recommend</h2>
                             $('#kr-nav').show();
                         }
 
-                         // 스크롤 상단
-                         $('.category-pop .scroll').scrollTop(0);
- 
                         // 탭 바꾼 뒤 현재 필터/검색/체크 상태 다시 적용
                         if (typeof applyBrandFilters === 'function') {
-                           applyBrandFilters();
+                           applyBrandFilters(getBrandMenuTopHeight());
                         }
                       });
@@ -15102,7 +15118,7 @@ K2 시원서커</h3>
                     });
 
                     $('#brand-k-check').on('change', function () {
-                        applyBrandFilters();
+                        applyBrandFilters(getBrandMenuTopHeight());
                       });
 
                     $('#brand-like-check').on('change', function (e) {
@@ -15136,7 +15133,7 @@ <h2>Today Recommend</h2>
                                   , "취소");
                           return;
                         }
-                         applyBrandFilters();
+                         applyBrandFilters(getBrandMenuTopHeight());
                       });
 
                 });
@@ -15178,9 +15194,10 @@ K2 시원서커</h3>
                     applyBrandFilters();
                 }
 
-                function applyBrandFilters() {
+                function applyBrandFilters(targetScrollTop) {
                     var $list = $('#brdNavList .brand_list.on');
                     var $nav  = $('#brdNavList .brand_list_nav.on');
+                    var brandFilterScrollTop = (typeof targetScrollTop === 'number') ? targetScrollTop : 0;
                     if (!$list.length) return;
 
                     if (!$('#brdNavList').is(':visible')) return;
@@ -15271,7 +15288,7 @@ K2 시원서커</h3>
                         }
 
                         // 스크롤 상단
-                        $('.category-pop .scroll').scrollTop(0);
+                        $('.category-pop .scroll').stop(true, true).scrollTop(brandFilterScrollTop);
 
                     }

https://contents.k-village.co.kr/front/mobile/js/commonFx.js

@@ -303,6 +303,7 @@ var PopupHistory = (function () {
                 PopupHistory.push('mobileNav', $el, function () {
                     $('.nav-close').first().trigger('click');
                 }, $('.category-pop').first());
+                if (typeof overflowFx === 'function') overflowFx(true);
             } else if (ON_RE.test(clsStr) && $el.hasClass('zoom-pop')) {
                // 이미지 확대(zoom-pop)는 dim 없이 on 만 사용하는 레거시 예외
                PopupHistory.push('zoom-pop', $el, null);
@@ -317,6 +318,9 @@ var PopupHistory = (function () {
         if (this.length && (clsStr === undefined
             || (typeof clsStr === 'string' && (DIM_RE.test(clsStr) || NAV_RE.test(clsStr) || ON_RE.test(clsStr))))) {
             PopupHistory.closedManually(this); // 컬렉션 전체 전달 — 추적 요소가 포함돼 있으면 동기화
+            if (typeof clsStr === 'string' && NAV_RE.test(clsStr) && this.first().is('body') && typeof overflowFx === 'function') {
+                 overflowFx(false);
+             }
         }
         return result;
     };
@@ -343,6 +343,16 @@ function pushEmergencyEventPopupHistory() {
 
 let scrollPosition = 0;
 var isSearch = false;
+var isBodyScrollLocked = false;
+var beforeBodyStyle = "";
+
+$(document).on('click change', '.category-pop .bnd .filter_btn_wrap button, #brand-k-check, #brand-like-check', function(e){
+	if ($(this).is('button')) e.preventDefault();
+	var $scroll = $('.category-pop .scroll');
+	var menuTopHeight = $('#brdNavList .brand_menu .menu_top').outerHeight() || $('.scroll .brand_menu .menu_top').outerHeight() || 0;
+
+	$scroll.stop(true, true).scrollTop(menuTopHeight);
+});
 
 var createMenu = function(){
 
@@ -364,6 +374,7 @@ var createMenu = function(){
 	//navigation
 	$(document).on('click', '.menu-holder ,.memu-holder', function() {
 		$("body").addClass("nav_open"); // 뒤로가기 닫기는 PopupHistory 후킹이 자동 처리
+		overflowFx(true);
 		$('.bnd').removeClass('open');
         $('.cate').addClass('open');
         $('#ctgryNavHead').addClass('on');
@@ -380,6 +391,7 @@ var createMenu = function(){
         $('.cate').removeClass('open');
         $('#ctgryNavHead').removeClass('on');
         $('#brdNavHead').addClass('on');
+				overflowFx(true);
         $('body').on('scroll touchmove mousewheel', function(event) {
             event.preventDefault();
             event.stopPropagation();
@@ -389,6 +401,7 @@ var createMenu = function(){
 
 	$(document).on('click', '.nav-close', function() {
 		$("body").removeClass("nav_open");
+		overflowFx(false);
 		$('.brand.memu-holder1.on').removeClass('on');
 		$('body').off('scroll touchmove mousewheel');
 	});
@@ -873,13 +886,33 @@ function resizeFx(){
 }
 function overflowFx($isHidden){
 	if($isHidden){
-		$("body").css({"overflow":"hidden"});
+		if(isBodyScrollLocked) return;
+
+		var $body = $("body");
+		scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+		beforeBodyStyle = $body.attr("style") || "";
+		$body.css({
+			"height":"100%",
+			"overflow":"hidden",
+			"position":"fixed",
+			"top":"-" + scrollPosition + "px",
+			"left":"0",
+			"right":"0",
+			"width":"100%"
+		});
+		isBodyScrollLocked = true;
 	} else {
-		$("body").removeAttr("style");
+		if(beforeBodyStyle) {
+			$("body").attr("style", beforeBodyStyle);
+		} else {
+			$("body").removeAttr("style");
+		}
 		if(scrollPosition != 0 ) {
           window.scrollTo(0, scrollPosition);
           scrollPosition = 0;
         }
+				beforeBodyStyle = "";
+				isBodyScrollLocked = false;
         if(isSearch) {
             $('div.main-menu').show();
             isSearch = false;