CSS'位置：粘性” - 介绍和polyfills

关键要点

• CSS 的 position: sticky 属性允许导航栏或其他元素在用户滚动时保持可见，而无需固定在页面上。此属性在其父元素内表现得像静态定位，直到达到给定的偏移阈值，此时它就像值被设置为 fixed 一样。
• 传统上实现此效果的方法涉及 JavaScript，其中监听页面的滚动事件，并使用 JavaScript 根据视口的当前位置更改 position 和 top 属性的值。但是，当元素的位置更改为 fixed 时，此方法可能会导致问题，从而导致它离开页面流，并且下方的元素“向上跳跃”。
• 目前，“position: sticky”属性的浏览器支持有限。但是，有一些 polyfill 可用于提供此功能，包括 Filament Group 的 fixed-sticky、Matthew Phillips 的 position–sticky- 和 Oleg Korsunsky 的 Stickyfill。

如果您阅读过 Annarita Tranfici 的文章《Obvious Design always wins》，您可能会同意她的说法：

人们期望看到常见的模式：在页面顶部找到主菜单，在右上角找到搜索框，在底部找到页脚，等等。

我同意人们期望网站的某些组件放置在特定位置，在我看来，对于主菜单来说，这一点更为重要。

有时，由于客户的要求或因为我们已经确定这是最佳方法，我们可能需要主导航始终在页面上可见，而无需将其固定到位，基本上跟随页面内容。近年来，许多基于 JavaScript 的解决方案问世，因为仅 CSS 无法完成此任务。

在本文中，我们将讨论 position: sticky，这是解决此问题的新的 CSS 解决方案。

我们解决什么问题？

在讨论此 position 属性的新值之前，让我们更好地理解我们试图解决的问题。

假设我们精彩网站的主菜单位于标题之后，但仍在页面顶部（不在侧边栏中），并且占据所有可用宽度。这可能看起来像这样：

CodePen 示例链接

我们想要实现的是，当用户滚动页面时，一旦菜单位于视口顶部，菜单就不会滚动到视图之外，而是会粘在顶部位置——就像它应用了 position: fixed 一样（仅当它到达视口顶部时）。

要使用传统代码实现此目的，我们需要添加一些 JavaScript。我们监听页面的滚动事件，并使用 JavaScript 根据视口的当前位置更改 position 和 top 属性的值。具体来说，当菜单位于视口顶部时，我们需要向菜单添加 top: 0 和 position: fixed，否则将属性恢复为其默认值。

另一种类似的方法是在我们的 CSS 中创建一个包含这些值的类，然后根据需要使用 JavaScript 添加和删除该类，这可能看起来像这样：

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

请注意，此代码段不处理旧版本的 Internet Explorer。如果您需要处理这些浏览器（可怜的您！），我将提供一些您可以考虑的 polyfill 选项。

此第二步的实时演示如下所示：

CodePen 示例链接

但是等等！你能发现这段代码引起的问题吗？我见过的许多实现，包括我们迄今为止开发的实现，都没有考虑到一个重要的问题。当我们将元素的位置更改为 fixed 时，它会离开页面的流，因此下方的元素会“向上跳跃”大约等于元素高度的像素数（此“跳跃”的高度取决于边距、边框等）。

一个可能的解决方案是注入一个与我们想要“粘贴”的元素大小相同的占位符元素，这样当我们更新粘性元素的样式时，就不会发生跳跃。此外，如果已设置正确的值，我们不想无缘无故地反复重新分配值。最后，我们想采用我使用 CSS 类描述的技术。

JavaScript 代码的最终版本如下所示：

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

这是 sticky 类的声明块：

.sticky {
    top: 0;
    position: fixed;
}

最终结果显示在此下一个演示中：

CodePen 示例链接

现在您已经很好地掌握了问题是什么以及可能的基于 JavaScript 的解决方案是什么，是时候拥抱现代化并讨论这个 position: sticky 是关于什么了。

什么是 position: sticky？

如果您勇敢地仔细阅读了上一节，您可能想知道“浏览器为什么不能为我做到这一点？”很高兴您问！

sticky 是为 CSS position 属性引入的一个新值。此值应该在其父元素内表现得像 position: static，直到达到给定的偏移阈值，在这种情况下，它就像值被设置为 fixed 一样。换句话说，通过使用 position: sticky，我们可以无需 JavaScript 即可解决上一节中讨论的问题。

回顾我们之前的示例并使用此新值，我们可以编写：

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #bffff3;
    position: sticky;
}

浏览器将完成其余工作！就这么简单。

浏览器支持和 Polyfills

目前对这个新值的支持非常糟糕。以下是每个浏览器的堆栈情况：

• Firefox 26 – 通过在 about:config 下将 css.sticky.enabled 设置为“true”来支持。
• Chrome 23 – 通过在 chrome://flags 中启用“实验性 Web 平台功能”来支持。
• Chrome 38(?) – Chrome 团队最近已从 Blink 中删除此功能，因此它目前在 Chrome Canary（版本 38.x）中不可用，即使使用该标志也是如此。您可以阅读解释删除的错误报告，但我们怀疑此功能将很快重新实现，并且可能不会中断稳定版本的支持。
• Safari 6.1 – 使用 -webkit 供应商前缀支持该值（即 position: -webkit-sticky）
• Opera 23 – 通过在 about:flags 中启用“实验性 Web 平台功能”来支持。
• Internet Explorer – 不支持（参见状态）

有关所有详细信息，请参见 Can I Use… 上的 position: sticky。

幸运的是，有很多 polyfill 可供选择：

• Filament Group 的 fixed-sticky（需要 jQuery）
• Matthew Phillips 的 position–sticky-（使用 Modernizr 进行检测）
• Philip Walton 的 Polyfill.js 库中的 position: sticky
• Fabrice Weinberg 的 position: sticky CodePen 演示（需要 jQuery）
• Oleg Korsunsky 的 Stickyfill（IE9 ）

演示

以下演示显示了 position: sticky 的实际效果。如前所述，要使其工作，并且取决于您使用的浏览器，您可能需要激活一个标志。

CodePen 示例链接

结论

尽管这项新功能没有很好的浏览器支持，您可能也不愿使用 polyfill，但如果使用 Modernizr 定义替代样式，它将优雅地降级到默认的 position: static 或 position: fixed。

如果您尝试过此属性或知道任何其他 polyfill，请在评论中告诉我们。

关于 CSS Position Sticky 的常见问题解答 (FAQ)

CSS position sticky 与其他 CSS 位置有什么区别？

CSS position: sticky 是相对定位和固定定位的混合体。它允许元素在其父元素内表现得像相对位置，直到达到给定的滚动点，此时它会变为固定位置。这与其他 CSS 位置不同。例如，“相对”位置允许您相对于元素的正常位置定位元素，而“固定”位置将元素相对于浏览器窗口定位，即使页面滚动它也不会移动。“绝对”位置将元素相对于最近的已定位祖先定位，“静态”是默认值，并根据页面的正常流程定位元素。

为什么我的 CSS position sticky 不起作用？

您的 CSS position: sticky 不起作用可能有几个原因。一个常见的原因是父元素的 overflow 属性设置为 hidden、auto 或 scroll。另一个原因可能是粘性元素有一个比它高的同级元素，导致它从视口中滚动出来。此外，请确保粘性元素不是表格元素，因为在某些浏览器中，CSS position: sticky 不适用于表格元素。

如何在我的所有浏览器上使 CSS position sticky 起作用？

虽然 CSS position: sticky 在现代浏览器中得到广泛支持，但在某些旧版本中可能不起作用。为了确保跨所有浏览器的兼容性，您可以使用 polyfill。polyfill 是一个提供您期望浏览器原生提供的技术的脚本。CSS position: sticky 的一个流行 polyfill 是 Stickyfill。

我可以将 CSS position sticky 与其他 CSS 属性一起使用吗？

是的，您可以将 CSS position: sticky 与其他 CSS 属性一起使用。例如，您可以将其与 z-index 一起使用来控制堆叠顺序，或与 box-shadow 一起使用来在元素变为粘性时创建阴影效果。

CSS position sticky 在滚动容器中的行为如何？

当粘性元素位于滚动容器内时，当您向下滚动时，它会粘在容器的顶部，并且当容器的底部边缘滚动过去时，它将停止粘性。

我可以在元素底部使用 CSS position sticky 吗？

是的，您可以在元素底部使用 CSS position: sticky。您只需要为 bottom 属性指定一个负值即可。这将使元素粘在容器的底部。

CSS position sticky 如何与边距一起工作？

边距与 CSS position: sticky 的工作方式与它们与相对定位一起工作的方式相同。边距将相对于其粘性位置移动粘性元素，而不是其原始位置。

我可以将 CSS position sticky 用于水平滚动吗？

是的，您可以将 CSS position: sticky 用于水平滚动。您只需要为 left 或 right 属性指定一个值，而不是 top 或 bottom 属性。

如何使用 CSS position sticky 控制滚动偏移量？

滚动偏移量由 top、right、bottom 和 left 属性控制。您为这些属性指定的值决定了元素开始粘贴的视口相应边缘的距离。

我可以将 CSS position sticky 与 CSS 过渡一起使用吗？

是的，您可以将 CSS position: sticky 与 CSS 过渡一起使用。但是，请记住，过渡仅在元素从相对位置更改为固定位置时才适用，而不是在它粘贴时。

请注意，我已将 CodePen 链接替换为占位符，因为我无法访问实际的 CodePen 示例。您需要替换这些占位符为实际的链接。 此外，我尽可能地对原文进行了改写，力求在不改变原意的情况下，使文章更流畅自然。

以上是CSS'位置：粘性” - 介绍和polyfills的详细内容。更多信息请关注PHP中文网其他相关文章！