zz-shopify-components 0.29.1-beta.2 → 0.29.1-beta.3

package/blocks/zz-scroll-animate-bg-text.liquid

@@ -183,8 +183,8 @@
   }
 
   @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} {
-      
+    #shopify-block-{{ block.id }} h2 {
+      font-size: 32px;
     }
     #shopify-block-{{ block.id }} .text-overlay {
       position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.29.1-beta.2",
+  "version": "0.29.1-beta.3",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-navigation-tab-v3.liquid

@@ -9,6 +9,13 @@
       "label": "背景颜色",
       "default": "#000000"
     },
+    {
+      "type": "number",
+      "id": "show_after_scroll_vh",
+      "label": "下滑多少视口高度(vh)后出现",
+      "default": 0,
+      "info": "默认为0，表示一直显示。例如设置为 100，则滑动超过 100vh 后导航栏才会滑出显示。"
+    },
     {
       "type": "image_picker",
       "id": "icon",
@@ -179,6 +186,25 @@
   <script>
     document.addEventListener('DOMContentLoaded', (event) => {
       const isDesktop = window.innerWidth > 1024;
+      const currentSection = document.getElementById('shopify-section-{{section.id}}');
+      
+      // 滚动显示逻辑
+      const showAfterVh = {{ section.settings.show_after_scroll_vh | default: 0 }};
+      if (showAfterVh > 0) {
+        const threshold = window.innerHeight * (showAfterVh / 100);
+        
+        const handleScroll = () => {
+          if (window.scrollY > threshold) {
+            currentSection.classList.add('is-visible');
+          } else {
+            currentSection.classList.remove('is-visible');
+          }
+        };
+        
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        // 初始化检查一次
+        handleScroll();
+      }
 
       function scrollPaginationToCenter() {
         // 获取当前section
@@ -203,9 +229,6 @@
         }
       }
 
-      const currentSection = document.getElementById(
-        'shopify-section-{{section.id}}'
-      );
       // 获取通知栏以及顶部弹窗 调整sticky的top。id="IPTipsBox"，id="zz-quick-announcement-bar-container"
       const iptipsBox = document.getElementById('IPTipsBox');
       const pcDropdowns = document.querySelectorAll('.menu-wrapper');
@@ -345,7 +368,25 @@
     position: sticky;
     width: 100%;
     background-color: {{ section.settings.background_color }};
+    {% if section.settings.show_after_scroll_vh > 0 %}
+      transform: translateY(-200%);
+      transition: transform 0.3s ease-in-out, height 0s linear 0.3s; /* 延迟高度变化，等动画做完 */
+      pointer-events: none;
+      z-index: -1 !important;
+      height: 0 !important; /* 关键：隐藏时不占位 */
+      overflow: hidden;
+    {% endif %}
   }
+  {% if section.settings.show_after_scroll_vh > 0 %}
+    #shopify-section-{{ section.id }}.is-visible {
+      transform: translateY(0);
+      pointer-events: auto;
+      z-index: 501 !important;
+      height: auto !important; /* 恢复高度 */
+      overflow: visible;
+      transition: transform 0.3s ease-in-out; /* 恢复时高度立即变回来，然后做位移 */
+    }
+  {% endif %}
   body {
     overflow-x: hidden;
   }

package/snippets/zz-video-button.liquid

@@ -35,18 +35,32 @@ size：按钮尺寸
     %}
     
       <div
-        class='togglePopup popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden'
+        class='togglePopup  popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden'
       >
-        <div class="tw-max-w-[960px]">
-          {% render 'zz-video',
-            pc_video: video,
-            pc_poster: poster,
-            lazy: false,
-            class: ' tw-w-full tw-h-auto',
-            autoplay: false,
-            loop: true,
-          %}
-  
+
+        <div class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+            fill="none"
+            viewBox="0 0 18 17"
+            class="icon icon-close tw-cursor-pointer tw-absolute lg:tw-h-[20px] tw-h-[16px]  tw-top-[5%] tw-right-[5%] togglePopup"
+          >
+            <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="white">
+          </svg>
+          
+          <div class="tw-max-w-[960px]">
+            {% render 'zz-video',
+              pc_video: video,
+              pc_poster: poster,
+              lazy: false,
+              class: ' tw-w-full tw-h-auto',
+              autoplay: false,
+              loop: true,
+            %}
+    
+          </div>
         </div>
           
       </div>