如何让你的 Divi 导航从底部开始，然后在滚动时固定在顶部

已发表: 2017-07-17

在今天的 Divi 教程中，我们将逐步向您展示如何在滚动时和超过全屏高度后在您的网站上进行固定导航。如果您按照本文中的步骤重新创建固定导航，您将看到导航将为您的主菜单和整个网站带来良好的交互效果。

我们将首先在屏幕上创建一个普通的垂直导航。此导航将被推送到屏幕底部，而不是位于页面顶部。滚动并超过屏幕的菜单高度后，您将看到菜单将改变其位置并放置在页面顶部。一旦导航变得固定，它将在整个页面的其余部分保持固定。但是，一旦您滚动回英雄部分，导航将再次正常运行并位于英雄部分的底部。

您可以说该页面将“选取”屏幕底部的菜单并提供您正在寻找的高级效果。为了帮助您可视化我们试图实现的结果，让我们看一下最终结果：

英雄部分：全屏模式的全宽标题模块

当您打算在您的网站上使用这种效果时，需要考虑一件事；你需要一个全屏模式的标题模块。理论上，您也可以将其应用于其他模块和部分，但您必须进行一些修改以确保菜单出现在该部分的底部。 Divi 提供的全屏选项可确保英雄部分填满屏幕（无论屏幕尺寸如何），这就是为什么如果您想将此效果应用于菜单，我们建议使用它。

首先打开或创建要添加此效果的页面。接下来，打开全角标题或创建它并转到“设计”选项卡。您将在设计选项卡中遇到的第一件事是布局子类别。继续并在该子类别中启用全屏模式。

滚动时创建固定导航

要将效果添加到我们的网站，我们需要同时使用一些 CSS 代码行和一些 jQuery 代码行。我们将使用的 CSS 代码将把导航放在屏幕底部，并在 jQuery 代码被激活之前使其表现得像一个普通的页脚。之后，jQuery 代码行将取代自定义 CSS 代码，并使导航根据您在网站上的位置进行操作。

添加所需的 CSS 代码

我们将首先向我们的网站添加所需的 CSS 代码。一般来说，有三种方法可以做到这一点。前两种方式使代码适用于整个网站。第三种方法使其仅适用于一页。

通过主题定制器添加 CSS 代码

我们将向您展示的第一种方法允许您通过主题定制器添加代码。这是一种不常用的添加代码的方法，但它有一些好处。其中之一是，一旦添加了代码，您就会注意到实时发生的更改。

要添加 CSS 代码，请打开您的 WordPress 仪表板 > 转到外观 > 自定义 > 向下滚动选项卡并打开附加 CSS 选项卡 > 添加以下 CSS 代码行：

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

通过主题选项添加 CSS 代码

您拥有的另一个选项，也是最常用的选项，是将 CSS 代码添加到您的 Divi 网站的主题选项中。添加代码后，它将应用于整个网站。如果您更愿意寻找一种仅将效果添加到一页的可能性，请转到下一种可能性，您可以将代码添加到特定的一页。

将代码添加到您的主题选项； 转到您的 WordPress 仪表板 > Divi > 主题选项 > 向下滚动常规选项卡并将以下代码粘贴到自定义 CSS 字段中：

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

仅将 CSS 代码添加到一页

如果您只想将此固定导航应用于一个页面而不是网站的其余部分，则这种可能性可能会很有趣。例如，如果您仅在主页上使用全角标题，则可能需要使用此方法。

滚动时打开要添加固定导航的页面。接下来，您将在构建器的右上角看到以下符号：

单击它，您将看到一个屏幕，您可以在其中对整个页面进行修改。在自定义 CSS 框中添加以下代码，使其特别适用于该页面：

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

添加所需的 jQuery 代码

我们要采取的下一步是将 jQuery 代码添加到我们的 WordPress 网站。此代码将从您滚动的那一刻开始工作。我们可以通过两种方式添加 jQuery 代码；通过主题选项或通过代码模块。如果您只想将代码添加到一个页面，您可以结合我们在本文中为 CSS 代码提到的第三种可能性使用代码模块。

通过主题选项添加 jQuery 代码

要将代码应用于您网站上的所有页面，您可以将代码添加到主题选项。 转到您的 WordPress 仪表板 > 转到 Divi > 继续主题选项 > 打开集成选项卡 > 并将以下代码粘贴到“<head> of your blog”字段中：

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

通过代码模块添加jQuery代码

如果您想将代码特别添加到一个页面，您可以通过代码模块来完成。在上一部分中，我们添加了 CSS 代码，您必须选择最后一个选项。

返回该页面并在页面顶部添加一个标准部分。在该标准部分中，添加一个代码模块。您实际上可以将此部分放在您喜欢的任何位置，但如果您想快速找到它，我们建议您将其放在页面顶部。接下来，将以下代码复制并粘贴到代码模块的内容框中：

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

就是这样！代码现在应该可以工作，转换您的菜单并使您的网站更具交互性。

最后的想法

在这篇文章中，我们向您展示了如何在滚动时创建固定导航。我们为您提供了一些 CSS 代码行和一些应该可以解决问题的 jQuery 代码行。如果你一步一步地关注这篇文章，你应该能够得到最终的结果。如果您对即将发布的帖子有任何问题或建议；随时在下面的评论部分发表评论！

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

特色图片由 DenisXize/shutterstock.com 提供