如何创建粘性网站标题

已发表: 2018-10-14

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

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

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

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

是什么让它发粘？

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

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

请记住：您不应该直接在您的网站上更改代码，以确保不会出现任何问题。我们的免费本地开发应用程序 Local 将帮助您设置一个测试环境，您可以安全地按照本教程进行操作。

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

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

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

无论您的页面有多长，或者您上下滚动多少次，导航都会“卡”在页面顶部。一个名为.navbar-fixed-top的类被添加到为导航创建位置的导航中。我将此类添加到导航标签中。位置设置为固定并添加左右定位可确保放置正确并占据页面的整个宽度。
请记住，无论何时应用此类，它都会创建元素的固定位置。这个类很可能只会应用一次，否则会有多个页面元素在同一个地方表现相同，造成混乱。

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

调整页面正文

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

body {

padding-top: 75px;

}

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

没有在粘性网站标题上出售？了解如何向您的网站添加粘性返回顶部按钮。

使粘性标题变软

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

带有 AnimatedHeader 脚本的 Squishy 导航

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

导航的基本 CSS

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

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

要更改大小，使用 JavaScript 添加.cpb-af-header-shrink类。让我们看一下使这种情况发生的脚本部分：

function scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

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

CSS 粘性定位选项

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

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

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

使用位置：粘性

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

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

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

要注意的粘性溢出情况

溢出兼容性

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

有限的浏览器支持

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

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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

一开始可能看起来很复杂，但没有理由陷入导航的常规；让你的导航变得粘糊糊的相对简单。通过一些简单的 CSS 固定定位，您可以轻松创建粘性网站标题。使用一些简单的 JavaScript，可以通过压缩到降低的高度来增强固定导航，从而为用户提供更多空间来查看网站内容。

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

在您的网站位于本地时创建一个粘性网站标题！了解更多并在此处免费下载！

本文最初于 2016 年 2 月 2 日发布。最后更新于 2018 年 10 月 14 日。