文章
649
标签
2112
分类
180
开发
大前端
人工智能
小程序
桌面应用
游戏开发
服务器&网络
服务器
网络
归档
标签
友链
联系我们
仰观苍穹思环宇
开发
大前端
人工智能
小程序
桌面应用
游戏开发
服务器&网络
服务器
网络
归档
标签
友链
联系我们
Shopify锚点导航双模式实现解决侧边栏冲突与Sticky吸顶联动的工业级方案,以及shopify模块设计和基本常识
发表于
2026-03-20
|
更新于
2026-09-12
|
shopify
您好, 这里需要密码.
shopify
锚点导航
顶部吸附
上一篇
MySQL数据库管理完整指南包含登录问题处理创建数据库和用户权限分配删除数据库用户以及数据复制迁移方法
下一篇
WordPress开发者问题排查完整指南从浏览器调试Enfold主题JavaScript错误定位到日志体系debug log error log access log的系统化排查思维与工具清单
相关推荐
2026-04-15
Shopify Vision主题自定义锚点导航实现指南
2026-04-15
Shopify Vision主题捆绑销售(Frequently Bought Together)功能开发完整教程
2023-08-08
查看shopify或者wordpress站点用了哪个模板主题和插件以及对应的框架方法
鸢尾花序
文章
649
标签
2112
分类
180
联系我们
目录
1.
方案最终实现了哪些需求
2.
核心设计思想
3.
手机版表现
4.
技术实现原理
4.1.
1 Sticky 吸顶原理
4.2.
2 锚点滚动计算
4.3.
3 Scroll Spy 高亮原理
4.4.
4 侧边栏动态生成
4.5.
5 Shopify 设置控制侧边栏
5.
是否支持多个板块复用
5.1.
使用方式
5.2.
为什么不会冲突
6.
JS 隔离性设计
7.
如何在多个区块中使用
7.1.
方法一（推荐）
7.2.
方法二（进阶）
8.
防冲突能力总结
9.
最终效果总结
10.
一句话总结
11.
assets/custom-navigation.js
12.
assets/custom-navigation.css
13.
sections/custom-sticky-nav.liquid
14.
sections/custom-content-block.liquid
15.
一、整体使用流程
16.
二、添加导航模块
17.
三、添加内容区块
18.
四、关键绑定规则
19.
五、页面结构推荐
20.
六、PC 与移动端表现
20.1.
PC 端
20.2.
移动端
21.
七、后台控制说明
22.
八、多板块复用方法
22.1.
使用方式
22.2.
注意事项
23.
九、防冲突机制
23.1.
1 独立实例
23.2.
2 局部作用域
23.3.
3 无全局变量
24.
十、常见错误排查
24.1.
1 点击没反应
24.2.
2 滚动位置不准
24.3.
3 侧边栏不显示
24.4.
4 高亮不变化
25.
十一、扩展建议
26.
十二、一句话总结
27.
一、整体架构理解
28.
二、custom-sticky-nav.liquid 负责什么
28.1.
1 渲染导航结构
28.2.
2 提供配置能力
28.3.
3 向 JS 提供数据
29.
三、custom-content-block.liquid 负责什么
29.1.
提供锚点目标
29.2.
内容完全自由
30.
四、custom-navigation.css 负责什么
30.1.
1 横向导航样式
30.2.
2 侧边栏样式
30.3.
3 统一视觉逻辑
31.
五、custom-navigation.js 负责什么
31.1.
1 控制点击跳转
31.2.
2 控制 sticky 吸顶
31.3.
3 控制高亮同步
31.4.
4 动态生成侧边栏
31.5.
5 控制显示逻辑
32.
六、四个文件如何协作
32.1.
第一步：Liquid 输出结构
32.2.
第二步：CSS 定义外观
32.3.
第三步：JS 绑定行为
33.
七、职责划分为什么这么设计
33.1.
1 完全解耦
33.2.
2 可维护性极强
33.3.
3 可复用性强
34.
八、一句话理解四个文件
35.
九、为什么这套结构是工业级的
36.
十、总结
37.
👉 在 Shopify 里实现了一个可复用的 UI 组件架构
38.
一、结论先说清楚
39.
二、什么时候需要“四个文件结构”
39.1.
1 有交互逻辑（必须 JS）
39.2.
2 有复杂 UI（必须 CSS）
39.3.
3 有可配置内容（必须 schema）
39.4.
4 有独立内容模块（可拆 content section）
40.
三、什么时候不需要这么复杂
41.
四、推荐的“工业级开发规范”
41.1.
1 结构层（Liquid）
41.2.
2 样式层（CSS）
41.3.
3 行为层（JS）
41.4.
4 内容层（可选）
42.
五、为什么要这样做
42.1.
❌ 写死在 Liquid 里
42.2.
❌ JS 写死 DOM
42.3.
❌ CSS 和 JS 混在一起
43.
六、后台 schema 应该怎么设计
43.1.
1 基础配置
43.2.
2 行为开关
43.3.
3 数值控制
43.4.
4 内容块（blocks）
44.
七、一个更高级的思路（重点）
45.
八、多模块开发建议
46.
九、一句话核心原则
47.
十、你现在处在什么阶段
48.
十一、最终建议
49.
十二、总结
50.
一、结论先说清楚
51.
二、CSS 是否自动隔离？
52.
三、为什么你现在暂时没出问题
53.
四、CSS 正确做法（工业级）
53.1.
推荐写法
53.2.
核心原则
54.
五、JS 是否自动隔离？
54.1.
你现在做对的地方
54.2.
但仍然有潜在风险
55.
六、JS 工业级隔离方案
55.1.
1 永远从 wrapper 出发
55.2.
2 避免全局变量
55.3.
3 类名唯一化（和 CSS 一致）
55.4.
4 多实例初始化
56.
七、最安全的一种写法（推荐）
57.
八、终极防冲突方案（进阶）
57.1.
1 CSS 前缀 + BEM
57.2.
2 JS class + data 绑定
57.3.
3 完全组件化
58.
九、你的当前方案评级
59.
十、你下一步该优化什么
60.
十一、一句话总结
61.
十二、最重要的一点（经验总结）
62.
👉 命名空间规范化
63.
一、你的理解是对的，但可以再提升一个层级
64.
二、完整数据流是怎样的
64.1.
1 后台配置（schema）
64.2.
2 Liquid 输出
64.3.
3 CSS / JS 使用
65.
三、不同类型配置应该如何分工
65.1.
1 纯视觉 → 用 CSS
65.2.
2 行为控制 → 用 JS
65.3.
3 内容数据 → 直接输出 HTML
66.
四、一个非常重要的设计原则
66.1.
错误示例 ❌
66.2.
正确示例 ✅
67.
五、为什么要这样分层
67.1.
问题1：不可维护
67.2.
问题2：不可复用
67.3.
问题3：Shopify 编辑器容易炸
68.
六、你现在可以这样设计任何模块
68.1.
第一步：想“我要让用户控制什么”
68.2.
第二步：分类
68.3.
第三步：实现
69.
七、一个更高级的理解（重点）
70.
八、扩展能力举例
71.
九、你理解中唯一需要修正的一点
72.
十、一句话总结
73.
十一、你现在的水平定位
74.
十二、最终建议
75.
一、先给你一个清晰结论
76.
二、Schema 是什么？是动态的吗？
76.1.
❌ 不是动态生成的
76.2.
✅ 是开发者手动写死的配置结构
77.
三、哪些是开发者定义的
77.1.
1 配置项结构
77.2.
2 数据类型
77.3.
3 默认值
77.4.
4 blocks 结构
78.
四、哪些是动态数据
79.
五、数据从哪里来
80.
六、Liquid 如何输出这些数据
80.1.
1 输出到 HTML
80.2.
2 输出到 style
80.3.
3 输出到 data 属性（给 JS 用）
81.
七、JS 是如何获取这些数据的
81.1.
1 获取 data 属性
81.2.
2 获取内容
81.3.
3 获取 class / 状态
82.
八、完整数据流（重点）
83.
九、举个完整例子
83.1.
schema
83.2.
Liquid
83.3.
JS
84.
十、一个常见误区
85.
十一、进阶写法（推荐）
85.1.
Liquid
85.2.
CSS
86.
十二、总结一句话
87.
十三、你现在的理解层级
88.
一、先给你结论
89.
二、为什么不会冲突
90.
三、可以这样理解（非常重要）
91.
四、真正会冲突的是什么
91.1.
❌ CSS 类名
91.2.
❌ JS 查询
91.3.
❌ 全局变量
92.
五、Schema 设计需要注意什么
93.
六、原则1：id 在当前 section 内必须唯一
94.
七、原则2：语义清晰（非常重要）
95.
八、原则3：为未来扩展预留空间
96.
九、原则4：block 内也要规范
97.
十、原则5：避免“跨 section 依赖”
98.
十一、什么时候才需要担心“冲突”
98.1.
1 JS 读错 DOM
98.2.
2 CSS 影响全局
99.
十二、如何做到完全安全
99.1.
1 加作用域
99.2.
2 JS 限制范围
99.3.
3 CSS 加前缀
100.
十三、总结一句话
101.
十四、你现在的理解可以再升级一下
102.
十五、最终建议（实战级）
最新文章
Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达
2026-09-17
白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析
2026-09-15
独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架
2026-09-15
Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost
2026-09-15
多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)
2026-09-14
告别逐个转换用md2pdf一键批量把Markdown变成PDF
2026-09-14
Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP
2026-09-14
用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践
2026-09-12
