如何在一页 Divi 网站的滚动上创建活动链接

在今天的教程中，我们将向您展示如何设置垂直导航链接的样式，以便当访问者向下滚动页面时，与他们所在部分对应的菜单链接将突出显示。 这是一个不错的小效果，可以在您的网页设计和用户行为之间增加一点交互性。 如果您要创建单页网站，则此方法特别有效。

对于那些很难在脑海中想象这种效果的人，我们在下面提供了一个预览。

结果

让我们来看看在遵循这篇文章后您将能够实现的最终结果：

如您所见，突出显示的活动链接会随着用户滚动页面部分（以及单击）而自动更改。

灵感

我们在柏林电影学院网站上找到了这篇文章的灵感，我们在我们关于垂直导航的文章中提到了这个网站。 该帖子评论中的一位读者要求我们向他们展示如何创建滚动活动链接效果，所以我们来了！

如何在一页 Divi 网站的滚动上创建活动链接

订阅我们的 YouTube 频道

入门：下载页面滚动到 ID 插件

为了实现这一设计，我们将首先使用免费且评价良好的 Page Scroll to ID 插件，您可以在此处找到该插件。 单击“下载”按钮并将插件 ZIP 文件保存在您可以立即找到的位置。

上传并激活页面滚动到 ID 插件

您需要做的下一件事是转到您的WordPress 仪表板 > 插件 > 添加新 > 选择您刚刚下载并上传的 ZIP 文件。

之后，也不要忘记激活插件。

启用垂直导航

在我们进入 Page Scroll to ID 插件的设置之前，我们将首先启用垂直导航（以及下一步中的固定导航）。 如果您在 WordPress 仪表板上，请转到外观 > 自定义 > 标题和导航 > 标题格式 > 并启用垂直导航。

启用固定导航

继续，让我们启用您网站的固定导航。 这是必要的，因为在滚动上使用活动链接的全部目的是让访问者看到他们在哪个部分，什么时候在里面。 如果您在 WordPress 仪表板上，请转到Divi > 主题选项 > 并在常规选项卡中启用固定导航栏。

页面滚动到 ID 插件设置

对于这一部分，我们将回到最近上传的插件。 激活插件后，您需要使用正确的设置。 要转到设置，请单击插件名称正下方的“设置”。

完成此操作后，您会注意到不同的选项，这些选项可帮助您确定活动链接在您的网站上的行为方式。 对于我们制作的示例，我们使用以下设置：

• 在 WordPress 菜单链接上启用：是
• 滚动持续时间：200 毫秒
• 自动调整滚动持续时间：是
• 滚动动画缓动：线性
• 到达页面/文档末尾时始终平滑滚动：是
• 在鼠标滚轮或触摸滑动上停止页面滚动：是
• 页面布局：自动
• 一次只允许一个突出显示的元素：是
• 保持当前元素突出显示，直到下一个进入视野：是
• 按下一个目标突出显示：是
• 将点击链接的哈希值附加到浏览器的 URL/地址栏：是
• 从/到不同页面滚动：是
• 页面加载时滚动到目标的延迟为 0 毫秒
• 防止其他脚本处理插件的链接（如果可能）：是
• 标准化锚点目标：是

将 CSS ID 和类添加到部分

您需要做的下一件事是将不同的 CSS ID 和 ID CSS 类上的页面滚动分配给您的单页机上的不同部分。 为此，请打开每个部分的设置并转到“高级”选项卡。 在“高级”选项卡中，决定要用于您的部分的不同 CSS ID。 要知道，为了让它工作，您必须为一页纸上的每个部分分配一个不同的 CSS ID。

在这个例子中，我们使用“home”作为我们的第一个 CSS ID。 但是，每个部分的 CSS 类都是相同的，它可以帮助您将该部分链接到 Page Scroll to ID 插件。 CSS 类名称是“ps2id”。

将 ID 添加到菜单项

接下来，是时候创建菜单项并确保它们与各部分和 Page Scroll to ID 插件一致。 如果您在 WordPress 仪表板上，请转到外观 > 菜单。 如果您已经有一个主菜单，则可以处理该菜单。 如果没有，您可以输入标题并创建一个新菜单。 不要忘记将其设为主菜单。

使用自定义链接

接下来，您将需要自定义链接来实现您想要的结果。 首先添加第一个自定义链接。 将您的网站后跟第一个部分 ID 添加到链接字段，如下面的屏幕截图所示。

启用 CSS 类

您需要做的下一件事是激活菜单项的 CSS 类（如果您过去还没有这样做过）。 为此，请单击右上角的“屏幕选项”选项。 一旦可能性出现，启用 CSS 类。

使用页面滚动到 ID CSS 类

为菜单项启用 CSS 类后，您可以继续手动将 Page Scroll to ID 类链接到每个菜单项。 CSS 类与我们用来为我们的部分分配 ID 的类相同，即“ps2id”。

进行外观修改

即使使用此方法，您也可以对主菜单进行各种修改。 为了向您展示如何进行更改，我们将重新创建示例垂直导航。

注意：正如这篇文章的介绍中提到的， 在预览页面时，您将无法看到所做的更改。 您必须先发布页面并以实时方式查看它才能注意到结果。

主题定制器

首先转到主题定制器>标题和导航>主菜单，并对主菜单的外观进行以下更改：

• 隐藏徽标图像：是
• 标志最大高度：83
• 菜单顶部边距：0
• 文字大小：14
• 字母间距：-1
• 字体: Lato Light
• 字体样式：大写
• 文字颜色：#FFFFFF
• 活动链接颜色：#FFFFFF
• 背景颜色：rgba(255,255,255,0)
• 下拉菜单背景颜色：rgba(255,255,255,0)

自定义 CSS 主题选项

要更改活动链接样式，我们必须添加一些自定义 CSS 代码。 如果您在 WordPress 仪表板上，请转到Divi > 主题选项 > 向下滚动“常规”选项卡，然后将以下 CSS 代码行粘贴到“自定义 CSS”框中：

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

除此之外，我们还使用了重叠的透明菜单，我们在这篇文章中对其进行了更详细的处理。 要将这些 CSS 更改也应用于您的网站，请将以下 CSS 代码行复制并粘贴到自定义 CSS 框中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

结果

按照本文中的所有步骤进行操作后，您应该能够获得以下最终结果：

当然，您可以根据自己的喜好修改样式（或者也可以将其用于顶部导航）。

最后的想法

在本教程中，我们向您展示了如何为单页浏览器创建交互式垂直导航菜单。 我们已经向您展示了如何将 Page Scroll to ID 插件与 Divi 主题结合使用来轻松实现您想要的结果。 在以后的文章中，我们将回到这一点，并向您展示如何通过此方法创造性地设置您正在使用的活动链接的样式。 如果您有任何问题或建议，请务必在下方评论区留言！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片来自 Yurlick / shutterstock.com