← 全部指南 Navigation

如何在Shopify中固定页眉和页脚菜单（无需修改主题代码）

在Shopify中固定页眉与页脚菜单：开启主题吸顶菜单、修复内容被遮挡问题，并在移动端添加底部标签栏。

10 分钟阅读 Oct 2026

快速解答：如何在Shopify中固定页眉与页脚菜单

要固定页眉，请打开主题设置 > 页眉并选择一个固定页眉选项（Dawn提供无、向上滚动时、始终和始终，缩小徽标尺寸四种）。由于大多数主题不具备固定页脚菜单，请通过自定义CSS或菜单应用添加底部标签栏，并在真实手机上测试。

按照以下三个步骤即可在屏幕上下两端完成固定导航的配置：

开启页眉原生设置： 在Shopify后台前往 在线商店 > 模版 > 自定义。打开页眉分区（或 主题设置 > 页眉），选择所需的 固定页眉 行为并保存。
添加移动端底部标签栏： 由于标准Shopify主题将页脚视为页面末尾的静态内容块而非导航栏，需通过作用域CSS或应用嵌入添加底部固定菜单。
使用真机验证显示效果： 在实体智能手机上检查店铺，确认页眉和底部栏均未遮挡页面主标题、行动按钮或手机系统手势区域。

核心技术发现

双极交互界面： 固定页眉在屏幕顶部保持品牌标识、搜索框和购物车常驻，而固定底部菜单则在拇指最佳操作区提供高频导航。
文档流与元素重叠： 使用 position: fixed 会将元素彻底抽离文档流导致排版空间塌陷，而 position: sticky 在触发滚动阈值前始终保留原始空间。
双固定栏的视口占用： 在手机端同时常驻上下两栏会压缩垂直可视空间；精简页眉尺寸并确保避开商品加入购物车按钮可避免界面冲突。

固定页眉（Sticky Header） 在访客向下滚动浏览时始终保持吸附在浏览器视口的最上沿。这确保了核心电商功能—例如品牌商标、主菜单导航、即时搜索栏和购物车入口—随时可用，无需访客在浏览完冗长的商品列表后吃力地滑回顶部。

CSS中 sticky 与 fixed 的核心机制差异

在CSS中，position: sticky 会使元素遵循常规文档流布局，直到视口滚动到指定阈值。MDN Web Docs关于CSS position的规范明确指出，sticky元素必须至少指定一个方向偏移量（如 top、bottom、left 或 right）才能生效。由于它在吸附前保留了物理占位，因此不会造成页面布局的突然塌陷。

相反，position: fixed 会将元素彻底从正常文档流中抽离。正如 MDN Web Docs 所说明的，页面布局中不会为该元素保留任何空间，导致后续内容上移并被遮挡在固定元素后方。此外，fixed和sticky都会创建新的层叠上下文（Stacking Context），从而改变 z-index 层级的生效逻辑。

如果你的店铺运行在Shopify官方的Dawn主题或现代Online Store 2.0主题上，无需编写任何代码即可开启固定页眉。该功能已原生集成在可视化主题编辑器中。

在Shopify后台中，导航至 在线商店 > 模版。
找到需要编辑的主题，点击 自定义。
在左侧工具栏中点击页眉分区（或根据主题版本打开 主题设置 > 页眉）。
找到 固定页眉 下拉设置项，选择所需的交互方式，点击右上角的保存。

Dawn主题中的四种固定页眉选项

在Shopify官方Dawn主题中，页眉配置在主题架构中定义了四种明确的固定模式：

设置选项	前台展示效果	最佳实操场景
无（None）	页眉随页面正常滚动，向下滑动时会直接移出屏幕范围。	单品独立站、长篇图文故事或追求最大化内容展示面积的极简店铺。
向上滚动时（On scroll up）	向下滚动时自动隐藏，访客稍稍向上滑动时顺滑展现。	商品种类繁多的综合商城；这是Dawn官方源代码中的默认选项。
始终（Always）	页眉以完整的初始高度永久常驻在浏览器视口最顶端。	搜索栏、货币选择器与购物车必须在任何深度都保持可见的高频交易店铺。
始终，缩小徽标尺寸	页眉始终吸顶，但会自动缩小Logo尺寸以降低垂直空间占用。	拥有纵向长方形或大尺寸Logo、容易遮盖商品主图的品牌店铺。

在官方 Shopify Dawn GitHub代码仓库中可以看到，Dawn将 sticky_header_type 的默认值设定为 on-scroll-up，并通过 position: sticky 实现吸顶效果。

Nielsen Norman Group关于吸顶导航的研究证实了这一机制的人机工程学优势：部分常驻（On scroll up）页眉基于一个明确假设，即用户的任何上滑行为都代表了寻找导航或结算的意图。在向下沉浸阅读时收起菜单，既保证了浏览面积又兼顾了跳转便捷性。

其他Online Store 2.0主题

其他Online Store 2.0主题可能也提供类似的设置，但名称和可选项可能与Dawn不同。在编写代码前，请务必先检查主题的原生页眉设置；如果没有此类设置，请改用下文的CSS方法。如果你正在Dawn上建站，可以参考我们关于 Dawn主题与Navi+深度整合指南。

更喜欢视频演示？下面的实操视频直观展示了主题编辑器中的具体设置位置：

若你使用的是缺少原生吸顶设置的定制主题或旧版模版，可以通过Shopify内置的自定义CSS功能固定页眉，无需打开 theme.liquid 修改底层文件。

操作前务必先复制主题备份

在调整样式代码之前，请务必创建在线主题的副本作为安全保障。正如 Shopify帮助中心关于复制主题的指导所指出的：”Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”

要复制主题，请转到 在线商店 > 模版，点击当前主题旁的省略号（...）图标并选择复制。所有CSS编写与前台测试都应在此副本上进行。

CSS代码的粘贴位置

Shopify在主题可视化编辑器内直接提供了 自定义CSS 输入区域。点击 在线商店 > 模版 > 自定义，在左侧侧边栏点击齿轮图标（主题设置），展开 自定义CSS 面板。

根据 Shopify关于添加自定义CSS的说明文档，写在主题全局CSS框中的规则适用于全店页面，上限为1,500个字符。请注意，如果将代码粘贴在单个分区（Section）的CSS框中，样式会被隔离在该分区内部，可能导致跨层级固定失效。

/* 示例 — 请根据你的主题选择器调整并在主题副本上测试 */
.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

该规则将 position: sticky 赋给页眉外层容器。正如 MDN Web Docs 所述，粘性定位需要一个方向界限—在此处 top: 0 指定当页眉上沿触碰视口顶端时开始吸附。设置 z-index: 3 则确保页眉在层级上始终浮于正文文字和商品图片上方。

务必避开社区论坛上的旧版教程。在Shopify Community中流传甚广的许多旧帖（如针对旧版Debut主题的吸顶教程 Shopify Community）大量依赖jQuery和手动DOM注入。该帖子本身就说明这是Shopify不提供支持的高级教程，因此不要把其中的脚本复制到当前主题；本指南只使用主题设置和CSS。

图1：概念示意图 — 通过scroll-padding-top解决内容遮挡与层叠上下文覆盖。

固定导航栏会直接影响页面几何尺寸、视口渲染及浏览器层叠顺序。遇到显示异常时，几乎总是由以下四种典型的CSS条件引起的。

首屏内容被遮挡在页眉下方

商家在手动固定页眉后最常遇到的抱怨是，横幅图或首行标题在页面刚加载完成时便缩进到了页眉底下（Shopify社区实际讨论案例）。

这通常是因为代码中采用了 position: fixed 而非 position: sticky。因为fixed将元素完全移出文档流（MDN Web Docs），后方内容会自动顶替占位。换回 position: sticky 通常能立即解决此问题，因为粘性容器在发生滚动前依然完整保留物理占位。

如果你的模版必须依赖fixed定位，或者页面内锚点链接（如 #reviews 或 #faq）点击后标题被页眉截断，需在根HTML元素上声明 scroll-padding-top。正如 MDN Web Docs 所述，该属性会预先扣除被占用的视口高度：

/* 示例 — 请根据你的主题选择器调整并在主题副本上测试 */
html {
  scroll-padding-top: 80px; /* 占位值：请替换为你自己页眉实测的高度 */
}

请务必通过浏览器的开发者工具测量你店铺页眉的实际像素高度，切忌直接套用论坛上的固定数值，因为各家Logo与公告栏高度差异巨大。

固定页眉失效（overflow属性冲突）

另一种高发情况是：原本吸顶正常的页眉在安装了轮播图或促销横幅插件后，突然失去了吸附能力。

其底层逻辑记录在 MDN Web Docs 中：粘性元素会与其拥有滚动机制的最近祖先容器建立绑定。如果任何父级结构（html、body 或外层容器）被赋予了 overflow: hidden、overflow: auto 或 scroll，页眉就会吸附于该父容器而非浏览器视口。若该父容器本身不发生滚动，页眉就会完全定死在原位。排查并清理父级结构中不必要的overflow属性即可解决。

页眉被其他内容覆盖遮盖（z-index）

向下滚动经过视频模块或买家评价组件时，页眉可能会滑落到这些组件下层。反过来，下拉菜单或侧边购物车抽屉也可能被页眉容器切断显示。

因为 position: sticky 和 position: fixed 均会生成全新的层叠上下文（MDN Web Docs），其内部元素都会受限于页眉本身的层级。请为页眉设置合理的 z-index，并确保侧边购物车抽屉和搜索弹窗的层级数值高于页眉。

仅在移动设备上停用固定效果

在垂直高度有限的手机屏幕上，常驻页眉可能会遮占过多展示面积。你可以使用标准媒体查询将吸顶效果严格限制在桌面端：

/* 示例 — 请根据你的主题调整选择器和断点（此处为750px），并在主题副本上测试 */
@media (min-width: 750px) {
  .section-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

Shopify的自定义CSS输入框支持 @media 媒体查询语法（Shopify帮助中心）。在Dawn主题中，你也可以直接将选项改为无或 向上滚动时 以释放空间。切勿使用JS脚本在页面加载后再延迟替换页眉Class，这会导致视觉跳动并恶化Core Web Vitals。根据 Google web.dev关于累积布局偏移（CLS）的指导，网站应力求将CLS分数控制在0.1及以下。

下表系统整理了固定页眉的高频故障表现与对应的技术解决方案：

故障现象 / 表现	架构底层诱因	推荐技术解决方案
首次加载页面时正文被截断	页眉使用了 `position: fixed`，导致文档流占位塌陷。	改用 `position: sticky`，或为页面主体补充对应的上内边距。
点击锚点后标题陷入页眉底层	视口滚动直接定位到元素上沿，未扣除吸顶栏高度。	在根HTML加入 `scroll-padding-top` 并填入实测页眉高度。
向下滚动时页眉完全不吸顶	祖先元素设置了 `overflow: hidden`、`scroll` 或 `auto`。	检查外层容器（html, body, #wrapper）并移除冗余overflow声明。
页面横幅或组件浮在页眉之上	层叠上下文发生冲突，页眉的z-index层级数值不足。	提高页眉的 `z-index`，并确保购物车抽屉保持更高的优先级。
移动端页面局促压抑	页眉在小屏设备上占据了过多固定垂直高度。	改用“向上滚动时”模式，或通过媒体查询在手机端禁用吸顶。

吸顶页眉在各大主题中极为普及，但搜索意图的后半截—固定页脚菜单—却反映出主题标准架构中的巨大断层。

在Shopify的模版架构中，“页脚（Footer）”被设计为页面最底端的静态内容聚集区。一个典型的全站页脚通常包含品牌介绍、售后条款、版权归属和支付图标等多列文本。如果把一个完整的传统页脚生硬地固定在手机屏幕下方，整个屏幕都会被遮死，用户根本无法浏览商品。

大家在搜索“固定页脚菜单”时，内心真正需要的是 移动端底部标签栏（Bottom Tab Bar）—一条吸附在屏幕底部的轻量导航条。绝大多数Shopify主题并不附带该组件，商家通常需要在手写CSS搭配自定义Liquid分区与专用菜单App之间做出抉择。

使用自定义CSS搭建底部固定栏

若打算手写CSS实现，其基础样式依靠固定在视口下沿的容器建立：

/* 示例 — 请根据你的主题选择器调整并在主题副本上测试 */
.my-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

body {
  padding-bottom: 60px;
}

由于 position: fixed 会把导航条移出文档流（MDN Web Docs），因此必须同步在 body 标签上添加等高的 padding-bottom。若缺失此间距，底部标签栏将永久挡住店铺真正的版权信息和在线客服悬浮窗。另外需注意，CSS仅负责容器外观，链接图标的HTML/Liquid标记及主题升级维护均需自行承担。

妥善适配iPhone底部安全区（Safe Area）

取消了物理Home键的现代智能手机（如iPhone全系）在屏幕底端都有一条用于手势切换的横线指示条。如果固定菜单直接贴紧底边而未留出硬件避让空间，菜单图标便会与系统手势横条发生碰撞误触。

MDN Web Docs关于CSS env()函数的规范明确指出，硬件安全间距可以通过标准环境变量无缝接入：

/* 示例 — 请根据你的主题选择器调整并在主题副本上测试 */
.my-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

加入 env(safe-area-inset-bottom) 能够保证按钮保持在系统手势横条上方且触控顺畅。欲深入探究人体工学与移动端导航架构，欢迎阅读我们关于 Shopify底部导航与移动标签栏设计指南。

图2：概念示意图 — 协调移动端上下常驻栏以避免遮挡商品购买转化入口。

在移动端同时启用顶部固定页眉与底部固定栏，会引发严峻的人机工程学挑战：垂直可视空间的争夺。

在桌面大屏上，通常有足够的纵向空间放置页眉。但在智能手机上，屏幕面积极其金贵。Nielsen Norman Group的用户研究特别指出，由于移动屏幕尺寸较小，节省屏幕空间在移动设备上至关重要。

如果上下两根粗大的横栏同时始终展示，留给用户看商品的区域便只剩一个扁窄的“猫眼”。为了保证浏览体验，请遵循以下原则：

尽可能精简页眉高度： 启用Dawn主题的 向上滚动时，在用户向下阅读时收起页眉；或选择 始终，缩小徽标尺寸，让固定的页眉更小。
杜绝与购买按钮发生踩踏： 在商品详情页上，有些主题自带有悬浮固定的“加入购物车”条。如果你的底部导航栏不加区分地设在 bottom: 0，极可能把购买按钮完全盖住。必须在移动端真实逐页排查。
保障键盘聚焦可视性（WCAG 2.4.11）： 无障碍标准 W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) 规定，获得键盘焦点的交互元素绝不能被作者创建的固定内容彻底掩盖。同时配置 scroll-padding-top 与 scroll-padding-bottom（MDN Web Docs）可确保聚焦焦点完整滚入视野。
确保舒适的点击目标尺寸（WCAG 2.5.8）： 遵循 W3C WCAG 2.5.8 (Target Size - Minimum)，移动端触摸目标的尺寸至少应达到 24 x 24 CSS像素，以避免误触干扰。

关于多端导航架构策略，可参考我们关于超越汉堡菜单的移动端导航创新以及商城导航无障碍全景指南。

权衡分析：何时不应当将菜单设为固定

常驻导航非常实用，但绝非适用于所有店铺或页面形态。Nielsen Norman Group的Page Laubheimer先生指出：”Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”

在实施固定导航前，请评估以下局限：

单品直营店或轻量落地页： 如果店铺只销售一两款产品且页面为沉浸式长叙事，用户不需要频繁切换目录。此时固定栏不仅无用，反而会削减视觉沉浸感。
底部浮层已较为拥挤的店铺： 若主题已内置固定加购条、优惠通知浮条或右下角客服聊天组件，再叠加底部菜单将造成灾难性的视觉混乱。
模版升级带来的持续维护成本： 写入主题编辑器的每一行自定义CSS都意味着未来的维护成本。正如 Shopify帮助中心所提醒，后续主题更新可能会重构类名或容器，导致样式失效需要手动修复。

若要判断何种菜单形态契合你的目录规模，请查阅我们的决策指引：如何为店铺挑选合适的菜单类型。

Navi+的适用场景：无需代码的移动端底部标签栏

首先明确界限：Navi+并不负责制作或管理顶部固定页眉。 主题原生设置（方法一）或主题全局自定义CSS（方法二）始终是解决屏幕顶端吸顶的最佳途径。

Navi+真正解决的是问题的后半部分—主流Shopify主题所缺失的 固定底部菜单。你不再需要手动编写Liquid分区或在CSS中苦算安全区位移，Navi+提供 Tab Bar（底部标签栏）：一个固定在屏幕底部的菜单栏，你可以在应用内用模板搭建。

Tab Bar的功能：

全站页面稳定常驻： Navi+ Tab Bar在所有商城页面保持可见（Navi+官方文档），其菜单结构最多支持3级。
零代码一键开启： 基于Shopify的App embeds架构规范。根据 Navi+官方发布指引，在应用内选好模版后，前往 在线商店 > 模版 > 自定义 > 应用嵌入，启用 Store Connector 并点击保存即可。
显示规则： 菜单可以按设备（手机或桌面）、页面类型（如首页、商品页或集合页）或URL关键词设置显示或隐藏（Navi+官方文档）。例如，你可以让Tab Bar仅在手机端显示。

与所有视觉改动一样，请遵循专业规范，先在复制的主题副本上完成测试（Shopify主题复制操作指引）。

If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. 如需查看官方设置步骤，请参阅在Shopify上发布Tab Bar。

操作核对清单

复制主题备份： 在调整主题设置或添加CSS前，前往在线商店 > 模版备份当前副本。
选定固定页眉模式： 在主题设置中选定适合的吸顶行为（如“向上滚动时”或“始终”）。
验证滑动顺畅度： 在商品列表与详情页中上下滑动，确认页眉显示与退出的平滑度。
核验锚点跳转偏移： 点击页内跳转链接（#reviews、#details），检查标题是否被截断，按需补充 scroll-padding-top。
检查层叠遮挡顺序： 展开二级下拉菜单、巨型菜单以及侧滑购物车，确保其顺畅浮于页眉上层。
配置底部导航栏： 通过CSS或应用嵌入添加底部标签栏，核查 env(safe-area-inset-bottom) 与body底部内边距。
排查商品详情页冲突： 在移动端检查底部导航栏是否会盖住商品“加入购物车”或快捷结算条。
测试无障碍与真机操作： 使用Tab键核对焦点可视性，并在实体iPhone与Android手机上完成触控体验。

FAQ