• 主页
  • 文章
  • 主题
  • 如何在向上滚动时显示全局标题并在使用 Divi 向下滚动时隐藏

如何在向上滚动时显示全局标题并在使用 Divi 向下滚动时隐藏

已发表: 2019-12-11

创建全局标头时，需要考虑许多事项。 您放置在标题中的元素需要帮助您的访问者轻松导航。 为了减少人们花在导航上的时间，许多网页设计师选择固定的顶部标题，允许访问者立即转到其他页面或帖子。 这真的很方便，但是在创建固定标题时，访问者的视口高度的很大一部分会被占用，从而减少了一次显示的内容。 如果您不愿意做出这种牺牲，请知道您不必这样做。 通过允许您的全局标题在您的访问者向上滚动时显示并在他们向下滚动时隐藏它，您可以获得固定标题的好处。 今天，我们将指导您使用 Divi 的 Theme Builder 隐藏和显示您的全局标题。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

显示全局标题

移动的

显示全局标题

免费下载全局标题模板

要使用免费的全局标题模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

1.转到Divi Theme Builder并添加新模板

转到 Divi 主题生成器

首先转到Divi Theme Builder。

显示全局标题

开始构建全局标题

在那里，单击“添加全局标题”并选择“构建全局标题”。

显示全局标题

2. 开始构建全局标题

部分设置

背景颜色

在模板编辑器中，您会注意到一个部分。 打开该部分并更改其背景颜色。

  • 背景颜色：#ffffff

显示全局标题

浆纱

转到设计选项卡，然后为您的部分指定 100% 的宽度。

  • 宽度：100%

显示全局标题

间距

也添加一些自定义的顶部和底部填充。

  • 顶部填充：2vw
  • 底部填充：2vw

显示全局标题

盒子阴影

我们还将对我们的部分应用一个微妙的框阴影。

  • 框阴影模糊强度：50px
  • 阴影颜色：rgba(0,0,0,0.08)

显示全局标题

CSS ID

在本教程的后面，我们将需要一些自定义代码来实现滚动效果。 为此，我们将向该部分添加一个 CSS ID。

  • CSS ID：全局标题部分

显示全局标题

主要元素

我们还将通过向该部分的主要元素添加两行 CSS 代码，将该部分变成一个固定的头部。 

position: fixed;
top: 0;

显示全局标题

Z索引

现在，为了确保我们的部分出现在所有页面或帖子内容的顶部，我们还将增加可见性设置中的 z 索引。

  • Z指数：99999

显示全局标题

添加新行

列结构

完成所有部分设置后，继续使用以下列结构向该部分添加新行：

显示全局标题

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。

  • 使用自定义装订线宽度：是
  • 天沟宽度：1
  • 均衡柱高：是
  • 宽度：100%
  • 最大宽度：100%

显示全局标题

间距

也删除所有默认的顶部和底部填充。

  • 顶部填充：0px
  • 底部填充：0px

显示全局标题

主要元素

通过向行的主要元素添加两行 CSS 代码，将列内容居中并允许列在较小的屏幕尺寸上保持彼此相邻。 

display: flex;
align-items: center;

显示全局标题

将社交媒体关注模块添加到第 2 列

添加社交网络

是时候添加模块了，从第 1 列中的社交媒体关注模块开始。添加您想要显示的社交网络。

显示全局标题

重置个人社交网络风格

继续在个人级别重置每个社交网络的样式。

显示全局标题

添加个人社交网络间距

您还需要单独打开每个社交网络的设置，并在间距设置中添加底部填充。

  • 底部填充：0.5vw

显示全局标题

结盟

将底部填充单独添加到每个社交网络后，请返回到您的常规模块设置。 移至设计选项卡并更改模块对齐方式。

  • 模块对齐：居中

显示全局标题

默认图标设置

也可以在图标设置中更改图标颜色。

  • 图标颜色：#000000

显示全局标题

悬停图标设置

并在悬停时修改图标颜色。

  • 图标颜色：#c2ab92

显示全局标题

边界

通过在边框设置中添加底部边框来完成模块的设置。

  • 底部边框宽度：1px
  • 底部边框颜色：#000000

显示全局标题

将菜单模块添加到第 2 列

选择菜单

进入下一栏！ 添加菜单模块并选择您选择的菜单。

显示全局标题

上传标志

接下来将徽标上传到模块。

显示全局标题

删除背景颜色

并去除背景色。

显示全局标题

布局

然后，转到设计选项卡并确保以下设置适用于布局：

  • 风格：居中
  • 下拉菜单方向：向下

显示全局标题

默认菜单文本

继续更改菜单文本设置，如下所示：

  • 活动链接颜色：#c2ab92
  • 菜单字体：Cormorant Garamond
  • 文字颜色：#000000
  • 菜单文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）

显示全局标题

悬停菜单文本

在悬停时修改菜单文本。

  • 菜单文字颜色：#c2ab92

显示全局标题

下拉式菜单

接下来，在下拉菜单设置中更改下拉菜单行颜色。

  • 下拉菜单行颜色：#000000

显示全局标题

图标

我们也在更改图标设置中的汉堡菜单图标颜色。

  • 汉堡菜单图标颜色：#000000

显示全局标题

浆纱

继续在大小设置中更改不同屏幕尺寸的徽标最大宽度。

  • 徽标最大宽度：5vw（桌面）、10vw（平板电脑）、13vw（手机）

显示全局标题

菜单链接 CSS

并通过在高级选项卡的模块菜单链接中添加两行 CSS 代码来完成模块的设置。 

padding-bottom: 1vw;
border-bottom: 1px solid #000;

显示全局标题

将文本模块添加到第 3 列

添加副本

进入最后一个模块！ 在那里，我们需要的唯一模块是文本模块。

显示全局标题

添加链接

此模块将用作 CTA。 添加您选择的链接。

  • 模块链接网址：#

显示全局标题

默认文本设置

转到模块的设计选项卡并相应地更改文本设置：

  • 文字字体：鸬鹚 Garamond
  • 文字颜色：#000000
  • 文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）

显示全局标题

悬停文本设置

更改悬停时的文本颜色。

  • 文字颜色：#c2ab92

显示全局标题

浆纱

继续在不同的屏幕尺寸上更改模块的尺寸设置。

  • 宽度：12vw（桌面）、18vw（平板电脑）、22vw（手机）
  • 模块对齐：居中

显示全局标题

间距

并在间距设置中添加一些底部填充。

  • 底部填充：0.5vw

显示全局标题

边界

通过添加底部边框来完成模块的设置。

  • 底部边框宽度：1px
  • 底部边框颜色：#000000

显示全局标题

将代码模块添加到第 2 列

插入 JQuery 和 CSS 代码

一旦您为行中的所有模块设置了样式，就可以显示/隐藏效果了。 为此，我们需要将一些自定义代码添加到我们将放置在第 2 列中的代码模块中。此代码将适用于您添加的任何部分，无论您如何设计标题或使用什么模块，只需确保您已将 CSS ID 添加到您的部分。 将 JQuery 代码放在 script 标签之间，将 CSS 代码放在 style 标签之间，如下面的打印屏幕所示。 

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});
#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

显示全局标题

3. 保存构建器更改并查看结果

完成全局标题后，保存所有更改并在您的网站上查看结果！

显示全局标题

显示全局标题

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

显示全局标题

移动的

显示全局标题

最后的想法

在这篇文章中，我们向您展示了如何使全局标题在向上滚动时显示并在向下滚动时隐藏。 这是一种流行且有效的方法，可帮助您的访问者轻松导航，而无需占用其视口高度的一部分。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。