如何在 Divi 中将滚动进度条与固定导航菜单相结合

进度条指示器可以为您的网站添加一个很好的触感，通过有用（和有趣）的交互来提升用户体验。 通常，进度条独立于页面顶部，与页面的实际内容没有太多联系。 用户只需直观地指示他们在页面上的位置。 但是，今天，我们将把这个功能提升到另一个层次。

在本教程中，我们将向您展示如何在 Divi 中将滚动进度条与固定导航菜单相结合。 这种设计的独特之处在于进度条与菜单按钮的宽度相关。 由于菜单按钮的宽度（以百分比表示）等于页面上可滚动部分的高度，因此当用户到达按钮的相应部分时，滚动进度条将精确填充每个按钮。 如果这还不够，我们还将使每个按钮成为指向相应部分的锚链接，以获得额外的 UX 奖励！

这种设计非常适合引导用户浏览描述流程步骤的登录页面。 嗯，你会看到的。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

https://youtu.be/Kf-ciVKEZFI

订阅我们的 YouTube 频道

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

单击导入按钮。

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

然后点击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

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

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

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

第 1 部分：创建全屏部分页面布局

顶部部分

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

在添加模块之前，按如下方式更新行设置：

• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部

在行内，添加一个文本模块。

然后打开文本模块的设置并粘贴以下 HTML 以创建彩色标题：

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

在设计选项卡下，将文本对齐更新为居中。

更新以下 H2 标题样式：

• 标题 2 字体：Roboto
• 标题 2 文字大小：6vw

打开部分设置并将高度更新为 100vh（或视口/窗口高度的 100%）。 这将确保该部分是全屏的。 然后取出padding如下：

• 高度：100vh
• 填充：0px 顶部，0px 底部

为了确保该部分内的行/内容在该部分内保持垂直居中，请将以下自定义 CSS 添加到该部分的主要元素：

display:flex;
flex-direction:column;
justify-content:center;

第一步部分

布局的下一部分将是四个步骤中的第一个。 这也是我们的第一个菜单锚链接将滚动到的第一部分。

要创建第一步部分，请复制我们刚刚创建的顶部部分。

然后打开复制部分的设置并更新背景颜色：

• 背景颜色：#222222

接下来，打开文本设置并将正文文本替换为以下内容：

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

将文本对齐方式更改为左对齐。

然后更新以下内容：

• 标题 2 文本颜色：#00a4e0
• 最大宽度：40vh（桌面），80vh（平板电脑）
• 模块对齐：居中

这将处理第一步部分。

第二步部分

要创建第二步部分，请复制我们刚刚创建的第一步部分。

打开部分设置并在背景颜色之上添加背景渐变，如下所示：

• 左渐变背景颜色：rgba(255,255,255,0.85)
• 右渐变背景颜色：rgba(255,255,255,0.85)

然后更新标题颜色：

• 标题 2 文本颜色：#ee4266

此部分的背景和标题颜色将与我们稍后创建的菜单中与此部分相关的按钮的颜色相匹配。

第三步部分

要创建第三步部分，复制第二步部分并将其拖到页面底部。

然后更改文本模块的标题颜色。

• 标题 2 文本颜色：#26c485

第四步

我们的最后一步是第四步。 要创建此部分，请复制第二步部分并将其拖到页面底部。

然后更新该部分中文本模块的标题。

• 标题 2 文本颜色：#2a1e5c

结果

这是到目前为止我们布局的结果。

第 2 部分：创建滚动进度条和菜单

下一部分是我们最终使用菜单按钮创建滚动进度条的地方。 这个想法是在页面顶部添加一个固定部分。 然后在该部分内，我们将创建一个包含分隔模块的行，该模块将用作我们的进度条指示器。 在带有进度条的行的顶部，我们将添加另一行将包含我们的按钮。 每个按钮都有一个透明（或半透明）背景，以便在用户向下滚动页面时显示其后面的进度条。

首先，让我们在页面顶部创建固定部分。 继续创建一个新的常规部分并将其拖到页面布局的顶部。

打开section设置，取出padding如下：

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

在高级选项卡下，更新以下内容：

• 位置：固定
• Z指数：999

这将确保该部分固定在浏览器窗口的顶部，以实现简单的锚链接功能。 它还将确保该部分脱离文档/html 的正常流程，并且不会增加整个文档的高度。 这将使我们在用户滚动时到达页面上的每个部分/步骤时准确地使滚动条到达每个按钮的末尾。

在该部分内，添加一列行。

打开行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部
• 位置：绝对

打开列设置并将以下自定义 CSS 添加到主元素：

height: 100%;
display:flex;
align-items:center;

这将确保列与截面具有相同的高度。 它还允许模块具有 100% 的高度。 这将是确保进度条填满该部分的关键。

要创建进度条，请向列添加分隔模块。

然后按如下方式更新分隔线设置：

• 显示分隔线：否
• 背景颜色：#222222

• 宽度：100%
• 高度：100%

注意：我们在此处为进度条提供 100% 的宽度，以便您可以在设计中看到它。 我们将使用 JQuery 增加和减少分隔线/进度条的宽度。

在高级选项卡下，添加一个 CSS ID 并为其指定绝对位置。

• CSS ID：滚动条
• 位置：绝对

添加百分比文本指示器

接下来，我们将添加一个位置来显示用户向下滚动页面时滚动位置的百分比。 这将与进度条的宽度相关。

在分隔线下，添加一个文本模块。

然后将以下 HTML 粘贴到正文中：

<p><span></span></p>

我们的 JQuery 会将百分比文本写入此 HTML（在 span 标记之间）。 你现在什么都看不到了。

尽管百分比文本尚不可见，但我们仍然需要添加以下样式以期待它的显示。

• 文字字体：Roboto
• 文字字体样式：TT
• 文字文字颜色：#ffffff
• 文字文字大小：16px
• 填充：顶部 0.8em，底部 0.8，左侧 15px

在高级选项卡下，给它一个自定义 CSS 类并在手机和平​​板电脑上禁用它。

• CSS 类：et-progress-label
• 禁用：手机、平板电脑

虽然我们还没有完成，但这是添加显示滚动进度条和百分比所需的自定义代码的好地方。

要添加代码，请在文本模块下方添加代码模块。

然后将以下代码粘贴到代码框中，确保使用所需的脚本标签包装它：

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

这会处理进度条和百分比文本。 让我们继续导航菜单。

使用锚链接构建菜单按钮

现在我们已准备好构建导航菜单，其中将包含四个跨越浏览器整个宽度的按钮。 我认为当用户到达它链接到的相应部分时，让滚动条填充每个按钮会很酷。 这是想法。 每个按钮的宽度为浏览器总宽度的 25%。 由于我们的四个部分都具有相同的高度 (100vh)，因此四个部分中的每一个都代表页面布局总可滚动区域的 25%。 这将确保进度条准确地到达每个按钮的末尾，因为相应的部分填充了视口。 你抓到了吗？ 如果没有，希望以后能更有意义。

行和列

要创建菜单按钮，首先，我们需要在包含进度条/分隔线的行下方创建一个四列行。

打开行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部

为了确保列在移动设备上堆叠，我们需要将以下自定义 CSS 添加到主元素：

display:flex;
flex-wrap:nowrap;

第一步按钮

要创建第一个按钮，请在最左侧的列中添加一个按钮模块。

更新按钮文本和链接 URL，如下所示：

• 按钮文本：第 1 步
• 按钮链接网址：#one
  （这个锚链接会跳转到我们稍后添加的对应 CSS ID 的部分）

接下来，更新按钮样式如下：

• 按钮对齐：居中
• 按钮文字大小：20px（桌面），14px（平板）
• 按钮背景颜色：透明
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字母间距：0.2em
• 按钮字体：Roboto
• 按钮字体样式：TT
• 填充：0.8em 顶部，0.8em 底部，0 左，0 右

要使按钮跨越列的整个宽度，请将以下自定义 CSS 添加到主元素：

display:block !important;
width: 100%;

步骤 2 按钮

要为第二步创建按钮，请复制第一列中的按钮并将其拖到第二列中。

然后更新以下内容：

• 按钮文字颜色：#ee4266
• 按钮背景颜色：rgba(255,255,255,0.85)

半透明的背景色会与黑色的进度条颜色（在它后面）相结合，以匹配相应的步骤二部分背景。

然后使用以下内容更新按钮链接 URL：

• 按钮链接网址：#two

步骤 3 按钮

要创建第 3 步按钮，请复制第 1 步按钮（它具有相同的 bg 颜色），并将其拖到第 3 列中。

然后更新按钮文本颜色：

• 按钮文字颜色：#26c485

然后使用以下内容更新按钮链接 URL：

• 按钮链接网址：#three

步骤 4 按钮

要创建第 3 步按钮，请复制第 2 步按钮（它具有相同的 bg 颜色），并将其拖到第 4 列中。

然后更新按钮文本颜色：

• 按钮文字颜色：#2a1e5c

然后使用以下内容更新按钮链接 URL：

• 按钮链接网址：#four

为锚链接添加相应的部分 CSS ID

一旦按钮完成并且它们都有自己的锚链接 URL，我们可以将相应的部分 CSS ID 添加到我们希望每个按钮跳转到页面上的每个部分。

第一步 部分 CSS ID

打开第一步部分的设置并添加以下 CSS ID：

• CSS ID：1

第二步 部分 CSS ID

打开第二步部分的设置并添加以下 CSS ID：

• CSS ID：两个

第三步 部分 CSS ID

打开第三步部分的设置并添加以下 CSS ID：

• CSS ID：三个

第四步 部分 CSS ID

打开第四步部分的设置并添加以下 CSS ID：

• CSS ID：四

最后结果

最后的想法

这个进度条菜单绝对是一种独特的设计，具有适用于各种应用程序的潜力。 希望它可以帮助您完成下一个项目。 而且，您可以随意探索 Divi builder 中可用的无数设计变体，以创建您自己的进度条菜单。

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

干杯!