gnb 원뎁스

kr/assets/js/common.js

@@ -43,6 +43,25 @@ $(document).ready(function () {
   //윈도우 사이즈 반응형에 따른 스크립트
   const body = document.querySelector("body");
   var targetSize = "";
+
+  // mobileOpenMenu에서 active 클래스를 가진 LI 요소로 스크롤 이동하는 함수
+  function scrollToActiveMenuItem() {
+    setTimeout(function () {
+      const $activeLi = $(".mobileOpenMenu .menu li.active");
+      const $menuContainer = $(".mobileOpenMenu .menu");
+      if ($activeLi.length > 0 && $menuContainer.length > 0) {
+        const activeLeft = $activeLi.position().left;
+        const activeWidth = $activeLi.outerWidth();
+        const containerWidth = $menuContainer.width();
+        const scrollLeft = $menuContainer.scrollLeft();
+        const activeCenter = activeLeft + activeWidth / 2;
+        const targetScroll = scrollLeft + activeCenter - containerWidth / 2;
+
+        $menuContainer.animate({ scrollLeft: targetScroll }, 300);
+      }
+    }, 100);
+  }
+
   function handleWindowSize() {
     const windowWidth = window.innerWidth;
     if (windowWidth <= 500) {
@@ -86,16 +105,19 @@ $(document).ready(function () {
         $(document).on("click", ".btnClose, .menuWarp .menuDepth2Wrap a", function (e) {
           $(".menuWarp .menuDepth1").removeClass("on");
           $(".menuWarp .menuDepth2Wrap").hide();
-          $(".menuWarp").css("right", "-100%");
+          $(".menuWarp").css("right", "-110%");
           $("html").removeClass("scrollDisable");
         });
         $(document).on("click", ".closeBtn", function () {
-          $(".menuWarp").stop().animate({ right: "-100%" }, { queue: true, duration: 300, easing: "easeInOutExpo" });
+          $(".menuWarp").stop().animate({ right: "-110%" }, { queue: true, duration: 300, easing: "easeInOutExpo" });
           $("html").removeClass("scrollDisable");
         });
         $(document).on("click", ".burgurBtn", function () {
           $(".menuWarp").stop().animate({ right: "0" }, { queue: true, duration: 300, easing: "easeInOutExpo" });
           $("html").addClass("scrollDisable");
+
+          // mobileOpenMenu에서 active 클래스를 가진 LI 요소로 스크롤 이동
+          scrollToActiveMenuItem();
         });
       }
       targetSize = "moblie";
@@ -149,6 +171,9 @@ $(document).ready(function () {
         $(document).on("click", ".burgurBtn", function () {
           $(".menuWarp").stop().animate({ right: "0" }, { queue: true, duration: 300, easing: "easeInOutExpo" });
           $("html").addClass("scrollDisable");
+
+          // mobileOpenMenu에서 active 클래스를 가진 LI 요소로 스크롤 이동
+          scrollToActiveMenuItem();
         });
       }
       targetSize = "tablet";
@@ -219,6 +244,9 @@ $(document).ready(function () {
   window.addEventListener("resize", handleWindowSize);
   handleWindowSize();
 
+  // 페이지 로드 시 초기 스크롤 위치 확인 (모바일/태블릿)
+  // 최상단일 때는 scroll-up 클래스가 없어야 하므로 별도 처리 불필요
+
   function menu_init() {
     $(document).off("mouseenter", ".menuDepth1Wrap");
     $(document).off("mouseleave", ".menuDepth1Wrap");
@@ -232,7 +260,7 @@ $(document).ready(function () {
     $(".mobileCarlist > .mobilecarItem").next().css("display", "none");
     $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
     $(".menuDepth1Wrap > .menuDepth1").next().css("display", "none");
-    $(".menuWarp").stop().animate({ right: "-100%" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
+    $(".menuWarp").stop().animate({ right: "-110%" }, { queue: true, duration: 500, easing: "easeInOutExpo" });
     $("html").removeClass("scrollDisable");
   }
 
@@ -243,6 +271,9 @@ $(document).ready(function () {
     initSwiper();
   });
 
+  // 페이지 로드 시 mobileOpenMenu에서 active 클래스를 가진 LI 요소로 스크롤 이동
+  scrollToActiveMenuItem();
+
   //자동차 번호/메뉴/로그인 선택 슬라이드
   $(".menu > a, .user > a")
     .on("mouseover focusin", function () {
@@ -341,7 +372,26 @@ $(document).ready(function () {
   }
 
   var flagScroll = true;
+  var lastScrollTop = 0;
   $(window).scroll(function () {
+    var currentScrollTop = $(this).scrollTop();
+
+    // 모바일/태블릿에서 스크롤 방향 감지
+    if ($("body").hasClass("moblie") || $("body").hasClass("tablet")) {
+      if (currentScrollTop <= 0) {
+        // 최상단일 때는 scroll-up, scroll-down 클래스 모두 삭제
+        $("body").removeClass("scroll-up scroll-down scroll-ing");
+      } else if (currentScrollTop > lastScrollTop && currentScrollTop > 100) {
+        // 스크롤 DOWN - 헤더 숨김
+        $("body").removeClass("scroll-up").addClass("scroll-down scroll-ing");
+      } else if (currentScrollTop < lastScrollTop) {
+        // 스크롤 UP - 헤더 노출
+        $("body").addClass("scroll-up").removeClass("scroll-down scroll-ing");
+      }
+
+      lastScrollTop = currentScrollTop;
+    }
+
     if ($(this).scrollTop() > 400) {
       $(".floating_menu").fadeIn();
     } else {
@@ -1575,24 +1625,25 @@ function openSharePopup() {
   currentUrl = currentUrl.split("#")[0];
   document.getElementById("shareUrl").value = currentUrl;
 
+  const userAgent = navigator.userAgent;
+  console.log("🚀 ~ userAgent:", userAgent);
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+
   // 모바일이고 navigator.share API가 지원되는 경우
-  if (navigator.share) {
+  if (isMobile && navigator.share) {
     const shareData = {
       title: document.title,
       url: currentUrl,
     };
 
-    const btn = document.querySelector(".btn-share");
-
-    // Share must be triggered by "user activation"
-    btn.addEventListener("click", async () => {
+    (async () => {
       try {
         await navigator.share(shareData);
         console.log("MDN shared successfully");
       } catch (err) {
         console.log(`Error: ${err}`);
       }
-    });
+    })();
   } else {
     console.log("navigator.share is not supported");
     open_layer_popup("sharePopup");