如何使任何 Divi 页面元素具有粘性

知道如何使任何 Divi 页面元素具有粘性（或固定）是网页设计师可以通过多种方式使用的便捷技能之一。 如果您不熟悉术语“粘性”，它只是指当用户向下滚动页面时网页上保持“固定”的元素。 粘性元素的一个流行示例是固定导航菜单。 默认情况下，Divi 具有固定（或粘性）导航功能。 因此，当用户向下滚动页面时，固定版本的菜单会在用户滚动时停留在页面顶部。 但是粘性元素几乎可以用于任何事情，这是在任何给定页面上引起人们对所需行动号召的注意的好方法。

在本教程中，我将向您展示一种简单的方法，通过在 Scroll 上使用名为“粘性菜单”（或任何东西！）的插件，使页面上的任何元素具有粘性。 只需花一些时间来配置插件设置。 然后你需要做的就是为你的元素添加一个自定义的 CSS ID。 就这么简单。

让我们开始吧！

本教程需要什么

对于本教程，您将需要以下内容：

• 迪维主题
• 滚动插件上的粘性菜单（或任何东西！）
• 会计师博客页面布局（可从 Divi Builder 中获得）

如何使任何 Divi 页面元素具有粘性

订阅我们的 YouTube 频道

配置插件设置

一旦您在 Divi 主题上安装并激活了 Scroll 插件上的粘滞菜单（或任何东西！），请前往 WordPress 仪表板并导航到设置 > 粘滞菜单（或任何东西！）。

在基本设置选项卡下，更新选项如下：

首先，您需要为粘性元素添加唯一标识符。 这可以是 CSS ID 或类。 然后我们稍后会将此标识符添加到我们在 Divi 中的元素中。 为了便于记忆，我将添加 CSS ID“#sticky”。

粘性元素：#sticky

然后您需要为页面顶部和粘性元素之间的空间添加像素值。 由于 Divi 的固定导航栏默认高度为 54 像素，我们希望为此选项添加至少 54 像素，以便我们的粘性元素不会与固定导航重叠。

页面顶部和粘性元素之间的空间：54 像素

在移动设备上禁用粘性元素也是一个好主意。 为此，我们需要将插件配置为在屏幕小于 980 像素时不粘贴元素。

屏幕小于 980 像素时不要粘贴元素

保存您的设置，然后转到“高级设置”选项卡并更新以下内容：

对于 z-index 选项，我们希望确保我们的元素堆叠在页面上所有其他元素的顶部，特别是如果我们计划我们的元素在滚动时与其他元素重叠。 为确保发生这种情况，请将 z-index 设置为 99998。

Z指数：99998

为了让您了解元素在 Divi 中的排序方式，部分的 z-index 为 2，列的 z-index 为 9，标题/导航栏的 z-index 为 99999。所以基本上，我们是希望我们的粘性元素比标题导航的 z-index 低 1 个数字。 这将确保粘性元素位于页面上除导航之外的所有其他内容之上。 每当您想要停止元素并将其向上推到页面时，这将派上用场，这样在您滚动时粘性元素就不会位于导航顶部（看起来凌乱和破碎）。

接下来，我们可以添加一个“向上推”元素标识符。 您可以将其视为我们的粘性元素的塞子。 这通常是一个页脚元素。 基本上，这标识了在向下滚动页面时将停止粘性元素的元素，允许粘性元素与页面的其余部分一起向上推。 对于本示例，我将使用 CSS ID“#stop”设置标识符。

俯卧撑元素：#stop

保存设置。

现在我们配备了制作粘性元素所需的力量！

使 Divi 页面元素具有粘性

为了向您展示如何使 Divi 元素具有粘性，我将使用 Accountant Layout Pack 中的 Divi 会计师博客页面。 首先，创建一个新页面，为页面指定标题，然后部署 Visual Builder。 然后选择“选择预制布局”选项。 从库加载弹出窗口中，选择 Accountant Layout Pack 并选择博客页面。

此页面在专业部分的右侧栏中提供电子邮件订阅选择表单。 为了吸引更多人注意这个表单，我们可以在用户向下滚动页面时使其变得粘滞。 然后我们可以让元素在到达页面的下一部分时停止（或上推），这样它就不会重叠。

如何使列具有粘性

不过，此时，我们需要决定要使什么特定元素具有粘性。 我们可以只使电子邮件选项模块具有粘性，但这不会考虑直接位于表单下方的社交媒体关注模块，我们也希望将其设置为粘性。 而且，我们可以为这两个模块提供相同的标识符，因为它们会在同一位置变得粘性，从而导致重叠。 最好的方法是使整个列（第 2 列）具有粘性。

要使第 2 列具有粘性，请打开包含我们要定位的列的行的行设置。 然后，在 Advanced 选项卡下，添加 CSS ID“sticky”。 这对应于我们在插件设置中添加的粘性元素唯一标识符。

CSS ID：粘性

（注意：不要在此处的 ID 之前放置主题标签（或磅）符号。另外，请确保将其添加到 CSS ID 而不是 CSS 类）

保存设置并预览页面的实时版本。 如果向下滚动，您会注意到第 2 列（包含两个模块）在距离窗口顶部 54px 时变得粘滞，并在您继续滚动时保持在该位置。

在部分停止粘性元素

如您所见，该元素继续保持粘性，因此它与下面其他部分的内容重叠。 为了阻止这种情况发生，我们可以使用我们在插件设置中添加的“上推”标识符（#stop）。

要停止下面部分中的粘性元素，我们需要打开部分设置并添加 CSS ID“停止”。

CSS ID：停止

现在去预览页面的实时版本。 注意粘性元素如何在您标识的部分停止。

很酷吧？

如何使模块具有粘性

要使单个模块具有粘性，您需要在 Divi 中进行调整以确保您的元素具有正确的 z-index，以便在滚动时它位于整个页面的其他元素之上。 正如我之前提到的，Divi 为所有部分分配了 2 的 z-index。 插件将 99998 的 z-index 应用于粘性元素。 但是由于模块不能在其父元素（节）上方排序（或索引），该模块仍将位于页面上的其他模块之后。 为了解决这个问题，我们需要确保并手动为保存我们的粘性模块的部分提供 99998 的 z-index。

为了说明这一点，我将使用我们之前使用的相同的会计师博客页面布局。 在将 CSS ID 添加到模块之前，首先，我们需要取出我们为第 2 列设置的 CSS ID（粘性）。然后取出我们为其下方部分设置的 CSS ID（停止）。 之后，打开社交媒体关注模块设置并将CSS ID“sticky”添加到模块中。

如果您查看实时页面，您会注意到当您滚动时与以下部分中的其他模块重叠时，粘性元素被隐藏。

要解决此问题，请打开包含社交媒体关注模块粘性元素的部分的部分设置。 然后将以下自定义 CSS 添加到主元素：

z-index: 99998;

现在检查实时页面。 请注意社交媒体图标将如何固定在页面顶部（距顶部 54 像素），就在固定导航下方，然后在滚动时保持在其他模块上方。

使部分具有粘性

要使整个部分具有粘性，您可以遵循相同的过程，将 CSS ID“粘性”添加到您选择的部分。 无需使用自定义 css 更新 z-index，因为插件会自动为您完成。

悬停效果可能会导致粘性元素出现故障

如果您在整个页面或粘性元素上都有活动的悬停效果，您可能会遇到一些小故障。 如果发生这种情况，您可能需要停用粘性元素悬停效果。

每页只有一个粘性元素

该插件每个页面只允许一个粘性元素，因此如果您想添加多个粘性元素，您将需要更高级的解决方案（或其他支持此功能的插件）。

最后的想法

我希望这篇文章有助于提供一种令人耳目一新的简单方法来使任何 Divi 页面元素具有粘性。 使用它来创建粘性子菜单、粘性 CTA、粘性促销优惠以及您能想到的任何其他内容。 尽情探索各种可能性！

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

干杯!