[기능] 모바일 메뉴 스크롤 시 동작 추가 및 스타일 수정

kr/assets/css/common.css

@@ -739,6 +739,18 @@ body.scroll-up .hederWarp_n .mobileOpenMenu {
   margin: 0 auto;
   flex-wrap: wrap;
 }
+.hederWarp_n .headerInner:after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 5.6rem;
+  background-color: #fff;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
 @media (max-width: 1120px) {
   .hederWarp_n .headerInner {
     height: 5.6rem;

kr/assets/css/common.scss

@@ -880,6 +880,18 @@ video::-webkit-media-controls {
     height: 8rem;
     margin: 0 auto;
     flex-wrap: wrap;
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 5.6rem;
+      background-color: #fff;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
 
     @media (max-width: 1120px) {
       height: 5.6rem;

kr/assets/css/promotion.css

@@ -1680,7 +1680,17 @@ html {
 }
 
 body#promotion.scroll-up .tabNavigation {
-  top: 10.6rem;
+  top: 5.6rem;
+}
+body#promotion.scroll-up .hederWarp_n .mobileOpenMenu {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+body#promotion.scroll-up.tab-sticky-end .hederWarp_n .mobileOpenMenu {
+  opacity: 1;
+  visibility: visible;
 }
 
 /*# sourceMappingURL=promotion.css.map */

kr/assets/css/promotion.scss

@@ -1708,7 +1708,20 @@ html {
 body#promotion {
   &.scroll-up {
     .tabNavigation {
-      top: 10.6rem;
+      // top: 10.6rem;
+      top: 5.6rem;
+    }
+    .hederWarp_n .mobileOpenMenu {
+      position: absolute;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s, visibility 0.3s;
+    }
+  }
+  &.scroll-up.tab-sticky-end {
+    .hederWarp_n .mobileOpenMenu {
+      opacity: 1;
+      visibility: visible;
     }
   }
 }

kr/promotion/disney_promotion_new.html

@@ -1759,6 +1759,47 @@
               .addTo(controller);
           }
         });
+
+        // tabNavigation sticky 끝 감지
+        var $tabContentArea = $(".tabContentArea");
+        var $mobileOpenMenu = $(".hederWarp_n .mobileOpenMenu");
+        var $body = $("body");
+        var baseScrollTop = 710;
+        var baseTop = 1.5; // rem
+
+        function checkStickyEnd() {
+          if (!$tabContentArea.length) return;
+
+          var tabContentTop = $tabContentArea.offset().top - 114;
+          var scrollTop = $(window).scrollTop();
+
+          // 스크롤 위치가 tabContentArea.offset().top - 114 이하면 mobileOpenMenu 표시
+          if (scrollTop <= tabContentTop) {
+            $body.addClass("tab-sticky-end");
+          } else {
+            $body.removeClass("tab-sticky-end");
+          }
+
+          // scrollTop이 710부터 줄어들면 top 위치 증가 (최대 5.6rem)
+          if (scrollTop < baseScrollTop) {
+            var diff = (baseScrollTop - scrollTop) / 10; // 10px당 0.1rem 증가
+            var newTop = Math.min(baseTop + diff, 5.6);
+            $mobileOpenMenu.css({
+              "top": newTop + "rem",
+              "opacity": 1,
+              "visibility": "visible"
+            });
+          } else {
+            $mobileOpenMenu.css({
+              "top": baseTop + "rem",
+              "opacity": "",
+              "visibility": ""
+            });
+          }
+        }
+
+        $(window).on("scroll", checkStickyEnd);
+        checkStickyEnd();
       });
     </script>
   </body>