zz-shopify-components 0.36.1-beta.8 → 0.36.1-beta.9

package/package.json

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

package/sections/zz-products-specs.liquid

@@ -21,7 +21,7 @@
 >
   <div class="tw-box-border tw-mx-auto tw-max-w-[1220px] lg:tw-py-[80px] max-lg:tw-pt-[48px] max-lg:tw-pb-[30px]">
     {%- if section.settings.title != blank -%}
-      <div class="tw-mb-[3rem] lg:tw-mb-[100px] tw-text-center tw-font-bold tw-text-[#2d2d2d] tw-leading-[1] tw-text-[2.8rem] lg:tw-text-[40px]">
+      <div class="tw-mb-[3rem] lg:tw-mb-[100px] max-lg:tw-px-[2rem] tw-text-center tw-font-bold tw-text-[#2d2d2d] tw-leading-[1] tw-text-[2.8rem] lg:tw-text-[40px]">
         {{ section.settings.title | escape }}
       </div>
     {%- endif -%}
@@ -190,15 +190,21 @@
 
     var isVisible = false;
     var ticking = false;
+    var lastNavOffset = -1;
 
-    {%- comment -%} Height of the visible content-navigation bar (mobile vs pc) {%- endcomment -%}
-    function getNavHeight() {
-      var pc = document.querySelector('.content-navigation-pc');
-      var mobile = document.querySelector('.content-navigation-mobile');
-      {%- comment -%} the hidden one (wrong breakpoint) reports offsetHeight 0 {%- endcomment -%}
-      var pcH = pc ? pc.offsetHeight : 0;
-      var mobileH = mobile ? mobile.offsetHeight : 0;
-      return Math.max(pcH, mobileH, 0);
+    {%- comment -%}
+      Offset of the floating head.
+      没有 content-nagivation--visible 元素时贴顶 0px;
+      存在时取导航条实际高度(PC / 移动端), 取不到则 PC 40px / 移动端 80px。
+    {%- endcomment -%}
+    function getNavOffset() {
+      var visibleNav = document.querySelector('.content-nagivation--visible');
+      if (!visibleNav) { return 0; }
+      var isDesktop = window.innerWidth > 1024;
+      var el = document.querySelector(isDesktop ? '.content-nagivation-pc' : '.content-nagivation-mobile');
+      var h = el ? el.offsetHeight : 0;
+      if (h) { return h; }
+      return isDesktop ? 40 : 80;
     }
 
     {%- comment -%} Match float bar geometry to the scroller (width, left, padding, column sizing) {%- endcomment -%}
@@ -209,7 +215,7 @@
       var padRight = parseFloat(cs.paddingRight) || 0;
 
       floatEl.style.left = scRect.left + 'px';
-      floatEl.style.top = getNavHeight() + 'px';
+      floatEl.style.top = getNavOffset() + 'px';
       floatEl.style.width = scRect.width + 'px';
       floatInner.style.paddingLeft = padLeft + 'px';
       floatInner.style.paddingRight = padRight + 'px';
@@ -240,16 +246,23 @@
 
     function update() {
       ticking = false;
-      var navH = getNavHeight();
+      var navOffset = getNavOffset();
       var headRect = header.getBoundingClientRect();
       var contentRect = content.getBoundingClientRect();
       var floatH = floatEl.offsetHeight || headRect.height;
 
       {%- comment -%} show once product row scrolls under the nav, hide when content bottom passes {%- endcomment -%}
-      var shouldShow = headRect.bottom <= navH && contentRect.bottom > navH + floatH;
+      var shouldShow = headRect.bottom <= navOffset && contentRect.bottom > navOffset + floatH;
+
+      {%- comment -%} nav offset changed (navigation shown/hidden or breakpoint switch): re-sync {%- endcomment -%}
+      if (isVisible && navOffset !== lastNavOffset) {
+        lastNavOffset = navOffset;
+        syncLayout();
+      }
 
       if (shouldShow && !isVisible) {
         isVisible = true;
+        lastNavOffset = navOffset;
         syncLayout();
         syncScrollX();
         floatEl.classList.add('is-visible');
@@ -302,7 +315,7 @@
      {
       "type": "select",
       "id": "from_type",
-      "label": "文案颜色模式",
+      "label": "价格前后缀",
       "default": "prefix",
       "options": [
         {
@@ -318,7 +331,7 @@
     {
       "type": "text",
       "id": "price_prefix",
-      "label": "Price prefix suffix",
+      "label": "Price prefix",
       "default": "from"
     }
   ],