如何使用 Divi 构建具有平滑滚动锚链接的响应式固定侧边栏

侧边栏并不像以前那样受欢迎。 在许多情况下，他们最终会分散注意力而不是提供帮助。 但有时侧边栏很有意义，尤其是在处理冗长的内容时。 这就是为什么我着手创建一个很有意义的侧边栏。

今天我将向您展示如何使用 Divi Builder 创建具有平滑滚动锚链接（或跳转链接）的响应式固定（或粘性）侧边栏。 因为侧边栏保持可见并且锚链接平滑地滚动到页面上的不同部分，所以侧边栏与内容保持结合，使其成为有用的 UX 功能。 就像文档大纲一样，这种组合使您的网页内容更易于访问和阅读。 对于那些长滚动页面来说，这是一个令人耳目一新的解决方案。

一探究竟！

抢先看

这是我们将共同构建的内容的先见之明。

这个概念

对于那些和我一样经常使用 Google Docs 的人，您都知道这个有用的文档大纲工具，它允许您轻松部署带有可点击大纲的固定侧边栏，可跳转到文档上的不同标题。 我喜欢它，因为它可以帮助我更快地找到信息。 我认为将相同的功能引入您的网站会很酷。

你需要什么开始

对于本教程，您真正需要的只是 Divi！ 我们还将使用食品食谱布局包中的食谱页面，该页面可从 Divi Builder 免费访问。

将布局添加到您的页面

订阅我们的 YouTube 频道

首先，继续创建一个新页面并部署 Divi Builder。 选择“选择预制布局”选项。 从 Load From Library 弹出窗口中，选择 Food Recipes Layout Pack，然后单击以使用 Recipes Page。

布局加载后，单击以在前端构建。

创建新部分

从前端 Divi Builder，创建一个新部分并将其拖到布局的最顶部。

复制布局标题部分中的按钮并将其粘贴到您创建的新部分的一列行中。

打开按钮设置并将以下自定义 CSS 添加到高级选项卡下的主元素：

display: block !important;

这只是允许按钮跨越列的整个宽度。

将按钮文本更改为“介绍”。 然后为按钮链接 url 添加以下内容：

＃介绍

这就是您创建锚链接的方式。 主题标签 (#) 告诉浏览器您将链接到 CSS ID。 以下文本“介绍”将对应于我们将添加到布局中的一个部分的 CSS ID 的名称。 CSS ID 的名称可以是您想要的任何名称。 只需确保它与您稍后为该部分提供的 CSS ID 匹配即可。

复制按钮，然后重复给按钮一个新的按钮文本和一个新的按钮链接 URL 的过程。 由于这将是跳转到页面不同部分的锚链接，因此请确保 CSS ID（“#”之后的文本）是唯一的，并且与您稍后将为您的部分提供的名称相对应。

对于此按钮，将按钮文本更改为“Ingredients”，将按钮链接 URL 更改为“#ingredients”。

再次复制按钮，然后为新按钮指定按钮文本“Nutrition”，并将按钮链接 URL 更改为“#nutrition”。

再复制一次按钮，然后为新按钮指定按钮文本“Instructions”，并将按钮链接 URL 更改为“#instructions”。

这就是我们现在需要做的所有事情。 我们将回到本节将其转换为固定的侧边栏。

将 CSS ID 添加到部分和行

现在我们已经创建了所有带有锚链接的按钮，我们准备将相应的 CSS ID 名称添加到我们的部分和行中。

锚链接将自动跳转到页面上具有相应 CSS ID 的任何元素。 CSS ID 可应用于内嵌文本、模块、行或部分。 如果你想使用 HTML 向标题添加 CSS ID，它看起来像这样：

<h2 id="introduction">Introduction</h2>

但是，由于我们要跳转到页面的某个部分，我们可以将 CSS ID 添加到页面的特定部分。 这将为用户提供足够舒适的查看空间，以便访问者可以轻松识别他们在页面上的位置。 跳转到内嵌文本或模块可能会使访问者感到困惑。

正如我们之前介绍的，我们创建的每个按钮 url 都对应于它们需要跳转到的部分的 CSS ID。

对于“介绍”按钮，我们需要将 CSS ID 添加到包含介绍内容的页面部分。 为此，请打开页面第三部分（标题正下方的部分）的部分设置，并在高级选项卡下添加以下 CSS ID：

CSS ID：介绍

这将对应于我们之前创建的介绍锚链接按钮。

现在在同一部分中，找到包含标题“成分”的行。 然后打开行设置并添加以下 CSS ID：

CSS ID：成分

这将对应于我们之前创建的成分锚链接按钮。

向下滚动到标题为“营养”的下一部分，然后打开部分设置。 然后添加以下 CSS ID：

CSS ID：营养

这将对应于我们之前创建的营养锚链接按钮。

最后，向下滚动到标题为“逐步说明”的布局的下一部分。 然后打开部分设置并在高级选项卡下添加以下 CSS ID：

CSS ID：说明

这将对应于我们之前创建的说明锚链接按钮。

保存更改。

现在是查看您的锚链接是否有效的好时机。 在新选项卡中打开页面，然后单击顶部的按钮以确保它们跳转/滚动到页面上的相应位置。

如果它们不起作用，请确保返回并检查 CSS ID 是否正确以及它们是否匹配。

创建固定侧边栏布局

将左边距添加到部分以为侧边栏创建空间

在页面顶部有锚链接对于目录之类的东西是很好的。 但是对于这个用例，我们希望用户始终可以看到这些锚链接，这样用户在单击其中一个链接后就不必滚动回页面顶部。 固定侧边栏将解决这个问题，因为当用户单击锚链接时，它会固定在页面的一侧。

但是在我们定位侧边栏之前，我们需要在页面左侧为其创建一些空间。 为此，我们将为布局的每个部分添加一个左边距。

我们添加到每个部分的左边距量将等于侧边栏的宽度，所以现在是时候决定侧边栏的宽度了。 对于此示例，宽度为 20% 即可。

打开第二部分的设置（我们的锚链接按钮正下方的部分）并添加以下自定义边距：

自定义保证金：剩余 20%

现在在保存设置之前，右键单击自定义边距选项，然后单击“复制自定义边距”并保存设置。

在整个页面布局的每个剩余部分上，通过右键单击该部分并单击“粘贴自定义边距”将自定义边距粘贴到该部分。

这将为您的所有部分提供 20% 的左边距，除了包含锚链接按钮的最顶部部分。

创建固定侧边栏

要创建侧边栏，我们需要在页面左侧为其提供一个固定位置。 所以基本上，我们将把顶部变成一个固定的侧边栏。 为此，请打开顶部部分的设置并更新以下内容：

在设计选项卡下，更新高度和宽度...

宽度：20%
高度：100%

在高级选项卡下，更新位置...

位置：固定
垂直偏移：80px

这为该部分提供了一个固定位置，宽度为页面的 20%。 它还将该部分定位在页面左侧和页面顶部 80 像素处，以适应标题导航的高度。 100% 高度确保该部分跨越页面的整个高度。

现在在另一个浏览器选项卡中查看页面以查看功能。 当您向下滚动页面时，侧边栏保持固定，您可以单击锚链接按钮轻松导航到不同的部分。

修复页脚重叠

您可能已经注意到该部分与页面底部的底部页脚栏重叠。

有几种方法可以解决这个问题。 例如，我可以从该部分中取出“height: 100%”，或者您可以在页面设置中添加一些 CSS 以调整页脚栏的宽度。 但是如果您想将部分高度保持在 100%，一个简单的解决方法是去掉部分背景颜色。 打开我们用于侧边栏的部分的部分设置并添加以下背景颜色：

背景颜色：rgba(255,255,255,0)

如果要更改侧边栏的颜色，可以打开页面设置并更改内容区域背景颜色。

由于部分背景颜色是透明的，因此页面的内容区域背景颜色会发光。 由于我们所有的其他部分都有背景颜色，它只会通过侧边栏部分显示，而不会与底部页脚栏重叠。

针对移动设备进行调整

这种设计对于智能手机来说真的没有意义，因为侧边栏没有空间，而且页面顶部的链接需要用户每次想要点击锚链接时向上滚动。 但是该设计仍然适用于平板电脑，但您可能需要为这些锚链接创造更多空间。 为此，请打开部分侧边栏行的行设置并更新以下内容：

自定义宽度：100
自定义填充（桌面）：左 10%，右 10%
自定义填充（平板电脑）：左 0%，右 0%

现在我们要做的就是隐藏（或禁用）智能手机上的部分。 为此，请打开部分设置并转到高级选项卡，然后单击复选框以在智能手机上禁用。

就是这样。 您现在有一个响应式固定侧边栏菜单，带有平滑滚动的锚链接！

最终结果

现在让我们检查最终结果。

这是布局在平板电脑上的样子。

了解有关固定元素和锚链接的更多信息

如果您发现本教程有帮助，请查看下面的一些相关教程：

• 使用锚链接可以在 Divi 中做的 5 件很酷的事情
• 如何使任何 Divi 页面元素具有粘性
• 如何在 WordPress 的侧边栏中添加固定小部件
• 如何让你的 Divi 导航从底部开始，然后在滚动时固定在顶部
• 如何修复你的 Divi 页脚
• 如何在 Divi 中创建浮动弹出菜单

最后的想法

此设置的美妙之处在于您可以轻松地将固定侧边栏添加到具有不同锚链接（或任何您想要的任何内容）的任何页面。 由于您的侧边栏基本上是一个 Divi 部分，您可以使用内置设置对其进行自定义，添加更多行并使用您想要的任何模块组合。

这种设置非常适合会员课程、教程、常见问题解答、作品集或长篇博客文章。 您甚至可以将它用于一页网站。 你还有其他用途要分享吗？ 我很想听听他们在评论中的内容。

干杯!