12月8日 14:45
方法一：使用Shopify应用（最简单）
适合无代码基础的用户。
1. 推荐应用：
Sticky Header & Cart Bar（免费/付费）
Sticky Add to Cart Bar（侧重商品页）
Growave（包含粘性功能）
2.步骤：
在Shopify应用商店搜索并安装。
通常支持自定义：滚动距离、背景色、动画效果。
优点：无需代码，实时预览。
缺点：可能轻微影响页面加载速度。
---
方法二：修改主题代码（最灵活）
需要基础HTML/CSS知识，修改前务必备份主题（在“主题” → “操作” → “复制”备份）。
步骤概览：
1. 进入代码编辑器：
后台 → “在线商店” → “主题” → “编辑代码”。
2. 定位导航栏文件：
通常位于 `layout/header.liquid` 或 `sections/header.liquid`。
部分主题（如Dawn）可能在 `sections/header-group.liquid`。
3. 添加CSS实现固定效果：
在 `assets/base.css` 或 `theme.css` 末尾添加以下代码（或通过“自定义CSS”注入）：
```css
/* 使导航栏固定在顶部 */
.header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
width: 100% !important;
background-color: #ffffff; /* 根据主题调整背景色 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 可选：添加阴影增强效果 */
}
/* 针对滚动时隐藏/显示的效果（高级） */
.header--hidden {
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.header--visible {
transform: translateY(0);
}
```
4. 添加JS实现滚动控制（如需滚动隐藏/显示效果）：
在 `theme.liquid` 的 `</body>` 标签前添加：
```javascript
<script>
let lastScrollTop = 0;
const header = document.querySelector('.header'); // 根据主题调整选择器
window.addEventListener('scroll', () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop && scrollTop > 200) {
// 向下滚动超过200px时隐藏
header.classList.add('header--hidden');
} else {
// 向上滚动时显示
header.classList.remove('header--hidden');
}
lastScrollTop = scrollTop;
});
</script>
```
---
方法三：结合在线工具生成代码
如果不懂代码，可使用工具生成后粘贴：
1. 访问 CSS Fixed Header Generator（如：webcode.tools/css-generator/fixed-header）。
2. 调整参数（背景、阴影等），复制CSS代码。
3. 在Shopify后台：“主题” → “自定义” → “主题设置” → “自定义CSS” 中粘贴。
---