如何使您的 Divi 页脚具有粘性

已发表: 2017-07-03

在本教程中，我们将向您展示如何使 Divi 网站上的页脚具有粘性。使用粘性页脚可能是您为客户设计网站时收到的要求之一，或者是您创建自己的网站时的需要。我们将向您展示两种使页脚具有粘性的可能性。第一种方式是通过 CSS 代码，第二种方式是通过 jQuery 代码。两种方式都有效，但这完全取决于您更喜欢使用哪种方式来为您的网站创建粘性效果。

向您的网站添加粘性页脚目前不是您可以在 Divi 构建器中自动执行的操作。这就是为什么我们将向您展示如何在无需付出大量努力的情况下达到您想要的确切结果。你唯一要做的就是一步一步地按照这篇文章，复制并粘贴一些代码行并将它们放在正确的位置。

为什么要使用粘性页脚？

粘性页脚通常用于一个主要原因；如果您的网站上有一页或多页内容不足以填满整个屏幕。当然，您可以确保页面上有足够的内容，但如果它不会为页面带来附加值；没有必要这样做。

现在，如果没有足够的内容来填满整个屏幕，页面将在内容结束后立即有一个浮动页脚。这通常看起来不太好，也不是您想要的结果。幸运的是，您可以使用粘性页脚来摆脱浮动页脚。粘性页脚确保页脚停留在页面底部，而不会产生不必要的空间。因此，页面的长度将保持不变，每次调整窗口大小时，页脚都会根据屏幕进行自我修改。

在这里，您有一张没有粘性页脚的短页面图像：

这是添加粘性页脚后该页面的相同图像：

粘性页脚和固定页脚的区别

不是每个人都决定在他们的网站上使用页脚，但当他们这样做时；有很多方法来设计它。这完全取决于您网站的结构如何，以及您是否想要包含使用 Divi 构建器制作的“手册”和不同样式的页脚。

但是，如果您使用的是标准页脚，您可以选择您喜欢的样式以及您希望它在您的网站上的位置。页脚在网站上的三个主要位置是浮动、固定和粘性。

将粘性页脚和固定页脚相互比较时；乍一看，它们可能看起来相同，但事实并非如此。在您的网站上滚动页面时，固定页脚始终可见，而粘性页脚专门处理内容不够长而无法到达屏幕底部的页面。在内容不够长的特定情况下；它会表现得像一个固定的页脚，并停留在页面的底部；创建“固定页脚效果”。

但是，如果内容足够长，粘性页脚将像往常一样工作，页面会将页脚向下推到页面底部，以确保它不会连续出现在屏幕上。在大多数情况下，这种方法比在整个网站中使用固定页脚更受欢迎，因为它在窗口上提供了更多空间来显示内容。

通过 CSS 在您的 Divi 网站上创建粘性页脚

不用再费力了，让我们开始为您的网站创建粘性页脚。我们将使用的代码非常简单，但可以完成工作。如果内容不够长，您将快速从页面上的浮动页脚移动到页脚被推到下方的页面。

通过页面设置添加 CSS 代码（尤其是一页）

在某些情况下，你想只在某个特定页面的页脚粘。在文章的这一部分中，我们将向您展示如何通过将 CSS 代码添加到页面的自定义 CSS 字段来准确地做到这一点。通过这样做，您可以确保 CSS 代码仅适用于您网站上的那个页面。这也意味着只有当有人打开该特定页面时才会加载 CSS 代码。这种方法通常用于网站上只有几个较短页面要为其提供粘性页脚的情况。

首先打开您希望粘性页脚处于活动状态的页面，或者创建一个您希望它应用的新页面。接下来，通过单击 Divi 构建器中的以下图标打开页面设置：

继续，将以下代码添加到您刚刚打开的窗口中的自定义 CSS 字段：

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

从您预览页面的那一刻起，就应该应用 CSS 代码并使页脚具有粘性。

通过主题定制器添加 CSS 代码（实时视图）

添加代码的另一种方法是通过主题定制器。如果您通过这种方式添加 CSS 代码，它将自动应用于整个网站。每个页面都将应用此 CSS 代码。通过主题定制器添加代码，您还可以直接看到您的网站发生的变化。

要将 CSS 代码添加到主题定制器，请单击 WordPress 网站后端的“主题定制器”。接下来，向下滚动页面并打开附加 CSS 选项。您将看到迄今为止使用的所有自定义 CSS 代码。继续并添加以下代码：

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

通过 Divi 主题选项添加 CSS 代码

最后但并非最不重要的一点是，您还可以通过 Divi 主题选项添加代码。这是向网站添加代码的最常用方法，您希望整个网站都能从代码中受益。

转到Divi > 主题选项 > 向下滚动页面 > 将以下 CSS 代码添加到自定义 CSS 框中：

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

通过 JQuery 在您的 Divi 网站上创建粘性页脚

通过代码模块添加jQuery代码（尤其是一页）

您可以使用 Divi 构建器中的代码模块添加 jQuery 代码。同样，这主要用于内容较短的页面不多并且您不想加载整个网站的 jQuery 代码时。

将带有全角行的部分添加到您正在处理的页面。

继续向该全角行添加代码模块并将以下代码粘贴到其中：

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

通过 Divi 主题选项添加 jQuery 代码

添加 jQuery 代码的另一种可能性是通过 Divi 主题选项。在为整个网站添加 jQuery 代码时，我们可以在 Divi 主题选项中的一个特定位置执行此操作；在 <head> 集成选项卡的字段。这正是我们现在要添加代码的地方。

打开您的 WordPress 网站 > 转到 Divi > 打开主题选项 > 转到集成选项卡并将以下 jQuery 代码添加到您网站的 <head> 中：

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

每次更改窗口大小时，此粘性页脚都会自行刷新，因此当您在浏览器中更改屏幕大小时，您不必担心会出现另一个浮动页脚。

最后的想法

在页面内容不多的情况下，通常需要添加粘性页脚。您想要摆脱浮动页脚，以使页面结构感觉更自然。如果您对我们博客部分的未来帖子有任何意见或建议；请确保您在下面的评论部分发表评论，以便我们与您取得联系！

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

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