变得粘性 — CSS 粘性定位故障排除

作者：Ibadehin Mojeed✏️

您花了几天甚至几个月的时间来构建一个时尚的网页。一开始一切看起来都很棒，但当你开始滚动时……突然间，你的粘性元素——导航菜单、标题或侧边栏号召性用语——要么根本不粘，要么不留在它们应该在的地方。

令人沮丧，对吧？

乍一看似乎是一个小错误，但很快就会变成一个真正令人头痛的问题，如果不解决，可能会严重损害您网站的参与度。

在本指南中，我们将解决这些最常见的粘性定位问题：

• 未指定偏移量
• flex/grid 容器内的粘性元素
• 粘性元素容器的高度
• 祖先有溢出属性
• 在 body 元素上溢出

然后我们将通过实际示例和技巧介绍如何解决这些粘性定位问题，让您成为粘性定位专家！在我们解决了常见问题之后，您还可以找到位置属性和 CSS 粘性位置的概述。

未指定偏移量

第一个也是最简单的故障排除步骤是确保使用上、右、下或左等属性指定偏移量：

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

如果没有偏移，粘性行为将不会激活。此外，请确保应用的偏移适合预期的滚动方向。例如，顶部或底部用于垂直滚动，左侧或右侧用于水平滚动。

flex/grid 容器内的粘性元素

下面的 CodePen 演示了网格容器内的粘性元素：

查看 CodePen 上 Ibaslogic (@ibaslogic) 的网格容器内的 Pen Sticky 元素。

在 CodePen 中，标题会粘住，因为容纳每个标题的容器有足够的可滚动空间。为了更好地可视化布局，请尝试在内容周围添加边框。这将帮助您在滚动浏览各个部分时了解每个标题如何保持在适当的位置。

 

在 HTML 代码中，标题放置在网格容器内，网格项自然拉伸以填充可用空间。然而，这种拉伸会阻止粘性元素有足够的空间来滚动和粘住。

为了解决这个问题，我们对网格容器应用了align-items:start。这可以防止粘性元素被拉伸，确保它有足够的空间来按预期发挥作用：

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

如果没有align-items: start，网格容器将拉伸标题以填充可用空间，防止元素粘在视口的顶部。发生这种情况是因为没有足够的可滚动空间来正确附加元素，如下所示：

 

虽然示例显示了网格的实现，但相同的解决方案也适用于 Flexbox 布局。

粘性元素容器的高度

当您与下面的 CodePen 交互并滚动视口以观察粘性行为时，您会注意到第一个粘性元素无法按预期工作，而第二个粘性元素可以正常工作 - 即使布局在视觉上看起来相似:

如前所述，为了使粘性元素正常工作，其容器必须有足够的高度或可滚动空间。让我们仔细看看容器。在第一个布局中，粘性元素包含在额外的

中：

article {
  align-items: start;
  /* ... */
}

在下面的 CodePen 中，您可以滚动该部分以观察粘性标题现在如何粘贴在该部分本身中。添加了边框以可视化可滚动区域：

在 body 元素上溢出

在 body 元素上设置溢出通常不会像其他祖先元素那样破坏粘性定位：

<p>这是因为主体为整个页面创建了主要滚动上下文，并且在这种情况下，粘性元素仍然相对于视口粘着：</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>即使创建了滚动机制，它也不会像在较小的容器中那样干扰粘性行为 - 除非设置溢出：隐藏，这会消除滚动溢出视口的任何内容的能力。 </p>

<p>现在我们已经介绍了常见的粘性问题，您可以阅读有关位置属性和粘性位置的更一般性概述。</p><h2>
  
  
  职位属性的简要概述
</h2>

<p>CSS 位置属性控制元素在网页上的定位方式。使用相对、绝对、固定或粘性等值，您可以使用其包含块或视口中的顶部、右侧、底部和左侧属性来调整元素的位置。这些值还使元素能够使用 z-index 进行相对定位。 </p>

<p>但是，请记住，这些偏移属性（即上、右、下、左）和 z-index 不适用于具有默认静态定位的元素。 </p>

<p>在解决粘性定位问题时，重新审视粘性值的含义会​​很有帮助。了解其行为可以更清楚地了解常见问题以及如何有效解决这些问题。</p>

<h2>
  
  
  CSS 粘性位置
</h2>

<p>当您将position：sticky应用到元素时，它的行为类似于相对定位的元素，通过保持其在文档流中的位置。然而，它也获得了变得“粘性”并响应滚动的能力。 </p>

<p>如果您定义了一个偏移量，例如 top: 10px，则当您向下滚动时，该元素将粘在该位置，就像使用position:fixed 一样。对于水平滚动，您可以使用向左或向右等偏移来实现类似的效果。值得注意的是，粘性行为仅适用于元素的包含块内。一旦滚动超过该块的边界，粘性元素就会像任何普通元素一样滚动消失。 </p>

<p>下面的 CodePen 演示了粘性行为。滚动视口以查看正在运行的粘性标题：</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>每个 HTML 标题都使用position:sticky和top:0进行样式化，确保当您滚动内容时它会粘在视口的顶部。然而，粘性标题仍然局限于各自的部分。一旦某个部分的内容完全滚动过去，其标题就会向上移动，从而使下一个标题保持在原位。这表明粘性元素不会逃离其父容器。</p>

<h2>
  
  
  结论
</h2>

<p>当粘性元素无法按预期运行时，构建网页可能会令人沮丧。但是，了解祖先溢出属性和父容器高度等关键因素可以帮助您解决粘性定位问题。 </p>

<p>通过本指南中的示例和提示，您将能够确保粘性导航、标题和侧边栏号召性用语顺利工作。如果您发现本指南有帮助，请随时在线分享。如果您有任何问题或贡献，请在评论部分加入我！</p><hr>

<h2>
  
  
  您的前端是否占用了用户的 CPU？
</h2>

<p>随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求越来越高。如果您有兴趣监控和跟踪生产中所有用户的客户端 CPU 使用情况、内存使用情况等，请尝试 LogRocket。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket 就像网络和移动应用程序的 DVR，记录网络应用程序、移动应用程序或网站中发生的所有情况。您无需猜测问题发生的原因，而是可以汇总并报告关键的前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。</p>

<p>现代化调试 Web 和移动应用程序的方式 - 开始免费监控。</p>


          

以上是变得粘性 — CSS 粘性定位故障排除的详细内容。更多信息请关注PHP中文网其他相关文章！