如何在 Divi 中创建从下到上的粘性导航栏

在今天的 Divi 教程中，我们将逐步向您展示如何在 Divi 中创建从底部到顶部的粘性导航栏。 这将允许导航栏最初停留在页面底部，以获得独特的首屏布局。 然后，一旦您滚动到页面的首屏部分，导航栏将停留在页面顶部，并在页面的其余部分保持在那里。 您可以说页面将“拾取”屏幕底部的菜单，并为您的主菜单和网站带来良好的交互效果。

让我们开始吧！

抢先看

为了帮助您可视化我们试图实现的结果，让我们看一下最终结果：

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中创建从底部到顶部的粘性导航栏

第 1 部分：创建首屏部分和标题

对于本教程的第一部分，我们将创建首屏部分和标题，作为页面的主要标题部分。 该部分将在桌面上全屏显示，以确保该部分占据整个视口。

添加行

首先，向默认部分添加一列行。

部分设置

添加模块之前，先打开版块的设置，添加背景如下：

• 背景颜色：#e9f9ff
• 背景图片：[添加图片]

在设计选项卡下，更新最小高度和填充。

• 最小高度：100vh（台式机），汽车（平板电脑和手机）
• 填充：20vh 顶部，20vh 底部

标题文字

要创建标题文本，请向该行添加一个新的文本模块。

然后使用以下 H1 标题更新内容：

<h1>Above the Fold</h1>

文字设置

在文本设置的设计选项卡下，更新标题字体样式如下：

• 标题字体：魔方
• 标题字体粗细：半粗体
• 标题字体样式 TT
• 标题文本对齐方式：居中
• 标题文字颜色：#302ea7
• 标题文字大小：130 像素（桌面）、70 像素（平板电脑）、40 像素（手机）
• 标题字母间距：2px
• 标题线高度：1.3em

第 2 部分：创建折叠下部分

为了演示粘性导航栏的功能，我们需要添加一个折叠下方的部分，以便我们可以有一些空间来滚动。

要创建该部分，请复制我们刚刚创建的折叠上方部分。

更新重复的部分背景。

• 背景颜色：#f4def1

然后给该部分一个大的最小高度，以便我们有空间向下滚动页面。 这只是一个填充部分，代替了页面的实际内容。

• 最小高度：200vh

然后通过将单词“Below”替换为“Above”来更新文本模块内容。

第 3 部分：创建粘性导航栏

要从下到上创建粘性导航栏，我们的第一步是创建一个具有一列行的新部分。

添加新的节和行

在折叠上方部分的正下方添加一个新的常规部分。

然后向该部分添加一列行。

部分背景和填充

打开部分设置并更新背景颜色。

• 背景颜色：#302ea7

然后取出顶部和底部填充，使导航栏的高度变小。

• 填充：0px 顶部，0px 底部

添加可见溢出

为了确保下拉菜单保持可见，请按如下方式更新可见性选项：

• 水平溢出：可见
• 垂直溢出：可见

给部分在移动设备上的绝对位置

默认情况下，移动下拉菜单将在汉堡包图标下方打开。 如果我们将导航栏保持在底部，如果用户在底部位置点击它，这将隐藏下拉菜单。 为了获得更好的用户体验，我们希望导航栏从平板电脑和手机显示屏的页面最顶部开始。

为此，请在平板电脑和手机上为该部分提供绝对位置。

• 位置：相对（桌面）、绝对（平板电脑和手机）

为桌面和移动设备添加粘性位置

要将粘性位置添加到导航栏部分，请更新以下内容：

• 粘性位置：粘在顶部和底部（桌面），粘在顶部（平板电脑和手机）

更新行填充

粘性部分完成后，打开该部分内行的设置并按如下方式更新填充：

• 填充：顶部 10 像素，底部 10 像素

创建导航菜单

部分和行就位后，我们就可以创建导航菜单了。

首先向一列行添加一个菜单模块。

菜单内容

更新菜单内容如下：

• 从下拉菜单中选择菜单
• 添加徽标图像（我使用的是 122 像素 x 52 像素的图像）
• 取出默认背景色

在设计选项卡下，更新以下菜单文本和图标设置：

• 活动链接颜色：#fff
• 菜单字体：魔方
• 菜单字体样式：TT
• 菜单文字颜色：#fff
• 菜单文字大小：16px
• 文本对齐：右
• 下拉菜单行颜色：#e19dff
• 移动菜单文本颜色：#302ea7
• 购物车图标颜色：#fff
• 搜索图标颜色：#fff
• 汉堡菜单图标颜色：#fff

使用边框偏移移动端导航栏的绝对位置

由于导航栏部分在移动设备上具有绝对位置，因此该栏将位于（并截断）页面顶部的上方。 为了解决这个问题，我们需要使用与导航栏/部分相同高度的顶部边框来偏移顶部部分。

在手机上检查导航栏部分的高度

要确定移动设备上导航栏的高度，请在新的浏览器窗口中打开页面的实时版本。 然后您可以将浏览器宽度缩小到 980px 以下以查看移动菜单。 右键单击包含菜单的部分，然后从浏览器的右键单击菜单中选择检查元素选项。 您应该在该部分下方看到一个工具箱，显示该部分的尺寸（包括高度）。 在这个例子中，导航栏部分的高度是 72px。

将顶部边框偏移添加到折叠部分

现在我们已经确定了部分的高度，打开顶部（折叠上方）部分的设置。

在设计选项卡下，在平板电脑和手机上添加以下顶部边框：

• 顶部边框宽度：72px（平板电脑和手机）
• 顶部边框颜色：#302ea7

由于边框与具有绝对位置的部分的高度相同，因此您将看不到边框，因为它只会将部分向下推，以免被切断。

最后结果

看看最后的结果！

最后的想法

通过使用 Divi 的内置位置和粘性选项，可以轻松地从底部到顶部创建粘性导航栏。 关键是给折叠上方部分的高度为 100vh，然后在下面添加导航栏部分，贴在浏览器的底部和顶部。 希望这将有助于为您的网站添加更独特和更具吸引力的首屏。

这个粘性导航栏最适合单页设计而不是全局模板。 也就是说，您可以轻松选择将其用作主页设计，并使用 Divi 主题构建器为其余页面使用全局标题。

我期待在评论中收到您的来信。

干杯!