如何创建粘性网站标题

已发表: 2023-02-12

当用户滚动时保留在原位的网站标题已成为一种非常流行的设计元素。它们允许用户轻松访问导航，而无需在每次他们想要选择不同的页面或选项时向上滚动。

具有此功能的元素通常被称为“粘性”，因为它们会粘在用户身上，在他们浏览网站时保持可见。当用户第一次访问该网站时，元素将位于其起始位置，但随后粘性标题将保留在同一位置。

由于导航是网站最重要的元素之一，因此采用这种方法有助于使导航更易于访问。保持原样的导航可以让用户在浏览网站内容时轻松流畅，这一点非常重要。

当人们浏览您的网站时，粘性导航元素有助于创建简单的用户流。

1.是什么让它变粘？

1.1. 注意：不要在您的实时站点上尝试此操作

1.2. 我们如何让导航停留在一个地方？

1.3. 调整页面主体

2.使粘性标题变软

2.1. 使用 AnimatedHeader 脚本的 Squishy 导航

3. CSS 粘性定位选项

3.1. 使用位置：粘性

3.2. 注意这些粘性溢出情况

4.不要在你的网站上尝试这个

是什么让它变粘？

固定定位是让导航留在原地的关键组成部分。这个固定位置元素相对于视口或浏览器窗口本身定位。因为当网站滚动时视口不会改变，所以当页面滚动时这个固定定位的元素将停留在同一个地方。

注意：不要在您的实时站点上尝试此操作

请记住：您永远不应该直接在您的实时站点上更改代码，以确保没有任何中断。我们的免费本地开发应用程序 Local 将帮助您设置一个测试环境，您可以在其中安全地按照本教程进行操作。

我们如何让导航停留在一个地方？

使导航具有粘性再简单不过了；它只是通过 CSS 样式完成的。它基本上看起来像这样：

 [CSS]

.navbar-固定顶部{

位置：固定；

右：0；

左：0；

z-指数：999；

}

[/CSS]

无论你的页面有多长，或者你上下滚动了多少次，导航都会“卡”在页面顶部。一个名为.navbar-fixed-top的类被添加到创建导航位置的导航中。我将此类添加到 nav 标记中。位置设置为固定，并添加左右定位确保放置正确并占据页面的整个宽度。

请记住，无论何时应用此类，它都会创建元素的固定位置。这个类很可能只会被应用一次，否则会有多个页面元素在同一个地方以相同的方式表现，造成混乱。

另一个重要的考虑因素是 z-index。因为我们希望导航始终可见，所以我们需要确保它不会被其他元素重叠。当我们引用z-index时，我们谈论的是设置特定元素堆叠顺序的 CSS 属性。具有较高堆栈顺序的元素始终位于另一个具有较低堆栈顺序的元素之前。值 999 是一个很大的数字，使其成为导航的安全赌注。

调整页面主体

因为现在导航是固定位置的，所以会覆盖到顶部的部分内容。有一个简单的修复方法。在 body 的顶部添加 padding 会将页面向下推，这样当用户到达页面时，顶部的内容就不会被标题覆盖。
您可以在 CSS 文件中向正文添加填充：

 [CSS]

身体 {

填充顶部：75px；

}

[/CSS]

请记住，您的填充可能会更大或更小，具体取决于固定标题的厚度。

使粘性标题变软

当用户滚动超过某个点时，通常会发现标题变薄，使其看起来松软。当导航尺寸减小时，它有助于为用户提供更多空间来查看主要网站内容。这在较小的设备上特别有用。我们将结合使用 CSS 和 JavaScript 来实现这一目标。

使用 AnimatedHeader 脚本的 Squishy 导航

要添加将在滚动时更改其大小的动画标题，有一个很棒的轻量级解决方案可以使导航变得柔软。它被称为 AnimatedHeader。它拥有 MIT 许可，因此可用于个人或商业项目。要获取这些文件，请查看 GitHub 上的 AnimatedHeader。

用于导航的基本 CSS

让我们来看看两个重要的 CSS 样式。第一个可能看起来很熟悉， .navbar-fixed-top指定了我们的高度、宽度和固定导航的固定位置。下面，您可以看到添加了另一个指定 75px 高度的类。这是“压扁”的尺寸。

 [CSS]

.navbar-固定顶部{
位置：固定；
顶部：0；
左：0；
宽度：100%；
背景：#f6f6f6；
z-指数：999；
高度：90px；
溢出：隐藏；
-webkit-transition：高度0.3s；
-moz-transition：高度0.3s；
过渡：高度0.3s；
}

.navbar-fixed-top.cbp-af-header-shrink {
高度：75px；
}

[/CSS]

要更改大小，JavaScript 用于添加.cpb-af-header-shrink的类。让我们看一下实现这一点的脚本部分：

 [javascript]

功能滚动页面（）{
var sy = scrollY();
如果（sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn）{
classie.add( header, 'cbp-af-header-shrink' );
}
别的 {
classie.remove(header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

[/javascript]

提醒一下，脚本中包含更多内容，因此请务必下载源代码，以便拥有所有组件。如您所见，在用户滚动到某个点后，添加了.cpb-af-header-shrink类。如果用户向上滚动页面，则删除此类。

CSS 粘性定位选项

还有一个选项可能不那么麻烦。根据您设计的浏览器支持， position: sticky; 使创建粘性标头变得非常简单。浏览器支持并不糟糕，但也不完全是全球性的。当你有 sticky 声明时，可以使用前缀。查看我可以使用以获取更多详细信息。

粘性定位的一种简单描述是它是相对定位和固定定位的结合。我猜你经常遇到粘性定位。我们在这里讨论的是标题，但它对于您希望在用户滚动时保持“粘性”的任何 UI 元素也很有用。当元素到达视口边缘的特定距离时，他们会看到它“卡住”了。

该元素被视为相对定位，直到它到达某个点，然后它才被“固定”。这个点是使用 CSS 声明的。 “点”基本上是当您指定顶部、底部、左侧或右侧时，就像您使用绝对定位一样。您需要指定，以便元素有一些东西可以“坚持”。

使用位置：粘性

使用起来非常简单。一些 CSS 声明和我能够有一个粘性标题。以下是三个简单的步骤：

找到正确的样式，以便您可以使用position:sticky; （不要忘记像position: -webkit-sticky;浏览器前缀）。
为要“粘贴”到的项目选择“粘性边缘”（顶部、右侧、底部或左侧）。
声明与“粘性边缘”的距离，即 10px 的标题，当它距离滚动区域 10px 时变得粘性。

 [CSS]

.navbar-固定顶部{
  位置：-webkit-sticky；
  定位：粘性；
  顶部：0；
}

[/CSS]

我不希望粘性标题和视口之间有任何空间，所以它距离顶部为 0 像素。你可以在 Codepen 上看到这个例子。

注意这些粘性溢出情况

溢出兼容性

这很棒，但并不完美。有一些限制。溢出有时会有点不可预测。最好在需要position: sticky父元素上避免某些类型的溢出。溢出自动、滚动或隐藏可能存在问题。

有限的浏览器支持

浏览器支持是有限的，所以使用supports规则来检测当前浏览器是否支持粘性定位是一个选项。看起来像：

 [CSS]

@支持（位置：粘性）{
  .header{
    位置：-webkit-sticky；
    定位：粘性；
    顶部：0；
  }
}

[/CSS]

考虑粘性定位是否绝对必要是很重要的。如果是，则可以使用固定定位方法。如果不是绝对必要，或者浏览器支持不是问题，粘性方法更容易实现。

乍一看似乎很复杂，但没有理由被困在导航车辙中；使您的导航具有粘性和粘性相对简单。通过一些简单的 CSS 固定定位，您可以轻松创建一个有粘性的网站标题。使用一些简单的 JavaScript，可以通过压缩到较低的高度来增强固定导航，从而为用户提供更多空间来查看网站内容。

不要在您的实时网站上尝试此操作

在本地为您的 WP Engine 托管网站创建一个粘性网站标题！了解更多信息并在此处免费下载！