记录---为什么你写的 `position: sticky` 不工作？99% 的前端都踩过这个坑
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<blockquote>
<p>前端世界里有很多看似“直白”的属性，比如 <code>position: sticky</code>，听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上，滚动时一动不动。</p>
</blockquote>
<p>结果实际开发中你可能经历过以下崩溃三连：</p>
<ul>
<li>设置了 <code>position: sticky; top: 0;</code>，元素依然随页面滚动；</li>
<li>控制台一切正常，CSS 正确无误，就是不生效；</li>
<li>你开始怀疑人生，默默换回了 <code>position: fixed</code>。</li>
</ul>
<p>别慌，这篇文章带你<strong>一次性弄懂 <code>position: sticky</code> 的底层机制、误区、实际用法和最佳实践</strong>。看完之后，不再当“被黏住的程序员”。</p>
</div>
<div>
<div>
<h3 data-id="heading-0">一、先明确：什么是 sticky？</h3>
<p><code>position: sticky</code> 是一种<strong>混合定位</strong>机制：</p>
<blockquote>
<p><strong>它在元素进入视口之前是相对定位（relative），一旦滚动到临界值，就切换为固定定位（fixed）的行为。</strong></p>
</blockquote>
<p>简单来说就是：<strong>先跟着父元素走，滚到该停的位置就贴住</strong>。</p>
<p>常见写法如下：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.sticky-header {
position: sticky;
top: 0;
background: white;
}</pre>
</div>
<div>
<div>
<p>然后希望这个 header 在滚动时“吸顶”，视觉效果如同 <code>position: fixed</code>，但它依然在文档流中。</p>
<hr>
<h3 data-id="heading-1">二、问题来了：为什么你写了 sticky，却没有“粘性”？</h3>
<p>很多人以为是浏览器不支持，其实在现代浏览器（包括手机端）中早就原生支持了。</p>
<p>问题通常出在这些<strong>容易忽视的坑</strong>：</p>
<h4 data-id="heading-2"><strong>坑一：父元素有 <code>overflow: hidden / auto / scroll</code></strong></h4>
<p><strong>这是最常见的元凶。</strong></p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.parent {
overflow: hidden;
}
.child {
position: sticky;
top: 0;
}</pre>
</div>
<div>
<div>
<p>这种结构下，<code>.child</code> 将永远无法“粘住”。</p>
<p><strong>原因是 sticky 的参考上下文是最近的可滚动祖先</strong>，而 <code>overflow: hidden</code> 等属性会导致容器成为新的“滚动上下文”，sticky 被限制在里面。</p>
<p><strong>解决方法</strong>：<strong>不要给 sticky 的父级设置 <code>overflow: hidden</code></strong>，或调整结构让 sticky 出现在没有滚动限制的区域。</p>
<hr>
<h4 data-id="heading-3"><strong>坑二：sticky 的祖先 <code>display: flex</code> 且方向不匹配</strong></h4>
<p>你可能看到过这种结构：</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="container">
<div class="sidebar">...</div>
<div class="content">...</div>
</div></pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
display: flex;
}
.sidebar {
position: sticky;
top: 0;
}</pre>
</div>
<div>
<div>
<p>你希望 sidebar 在垂直方向粘住顶部，但却发现它根本不“sticky”。</p>
<p><strong>关键在于：flex 布局的主轴方向与 sticky 的方向冲突时，会导致 sticky 无法触发。</strong></p>
<p><strong>解决方法</strong>：</p>
<ul>
<li>确保 sticky 的方向（如 top/bottom）是主轴方向；</li>
<li>或者避免让 sticky 元素在横向 <code>flex</code> 容器中直接使用。</li>
</ul>
<hr>
<h4 data-id="heading-4"><strong>坑三：没有指定 top/left/right/bottom</strong></h4>
<p>这是最基本的问题，但常常被忽略。</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.sticky {
position: sticky;
}</pre>
</div>
<p>这段代码等于什么都没设置，因为你必须指定粘性的触发边界，否则就没有触发条件。</p>
<p>最常见的是：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.sticky {
position: sticky;
top: 0; /* 吸附到顶部 */
}</pre>
</div>
<h3 data-id="heading-5">三、冷知识：sticky 也有“活动半径”</h3>
<p>这个知识点比较少人知道：</p>
<blockquote>
<p><code>position: sticky</code> 的“吸附”只在它所属的父元素区域内生效。</p>
</blockquote>
<p>什么意思？我们来看一个例子：</p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="section">
<h2 class="sticky">章节标题</h2>
<p>一大段内容</p>
</div></pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.section {
height: 600px;
overflow: visible;
}
.sticky {
position: sticky;
top: 0;
}</pre>
</div>
<div>
<div>
<p>当滚动到 <code>.sticky</code> 即将离开 <code>.section</code> 的底部区域时，它会自动“脱粘”而不再吸附。</p>
<p>这也就是说：</p>
<blockquote>
<p>sticky 不是全页面范围内固定，而是<strong>在其包含块（父元素）范围内固定</strong>。</p>
</blockquote>
<p>这点与 <code>position: fixed</code> 有本质不同。</p>
<hr>
<h3 data-id="heading-6">四、实际场景推荐：sticky 的用武之地</h3>
<h4 data-id="heading-7"><strong>1. 表头吸顶</strong></h4>
<p>表格中的 <code>thead</code> 永远固定在顶部，是 sticky 的经典场景：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">thead {
position: sticky;
top: 0;
background: white;
z-index: 10;
}</pre>
</div>
<blockquote>
<p>冷知识提醒：不要忘了加 <code>background</code> 和 <code>z-index</code>，否则会被后面的表格内容遮挡。</p>
</blockquote>
<h4 data-id="heading-8">2. 左侧目录导航</h4>
<p>当你在写文档页面、博客系统、掘金专栏时，目录条跟随滚动吸附。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.nav {
position: sticky;
top: 20px;
}</pre>
</div>
<p>提示：设置 <code>top: 20px</code> 可以保持一点视觉上的留白感，避免太贴边。</p>
<h4 data-id="heading-9">3. 分段标题悬浮</h4>
<p>像微信公众号正文那种标题悬浮，每个段落标题随着滚动在顶部短暂停留，也是 sticky 的天然优势。</p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">h2 {
position: sticky;
top: 0;
background: white;
}</pre>
</div>
</div>
<div class="code-block-extension-header">
<div>
<div>
<p>这种方式比 <code>IntersectionObserver</code> 更简单、性能更好，兼容也更广。</p>
<hr>
<h3 data-id="heading-10">五、bonus：sticky + scroll-margin 搭配更美观</h3>
<p>另一个冷知识是，<code>sticky</code> 和 <code>scroll-margin</code> 是一对黄金搭档。</p>
<p>当你在跳转锚点时，元素可能会被“贴死”在顶部，体验很差。</p>
</div>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.section-title {
scroll-margin-top: 60px;
}</pre>
</div>
<p>个属性的意思是：在浏览器滚动到锚点时，距离顶部保留 60px 的空隙，刚好与 sticky 的吸顶位置对齐。</p>
<hr>
<h3 data-id="heading-11">六、你应该避免的错误总结</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202508/2149129-20250814164549541-37408800.png" alt="企业微信截图_20250814164534" loading="lazy"></p>
<div>
<div>
<h3 data-id="heading-12">尾声：粘贴的不只是样式，更是理解力</h3>
<p>CSS 很多“高级”特性并不是写法复杂，而是<strong>对浏览器工作方式的理解不够清晰</strong>。<code>position: sticky</code> 看似只是个定位属性，其实牵涉了滚动上下文、布局流、容器模型、层级控制等多个维度。</p>
<p>当你真正理解 sticky 的“粘性边界”与“父级限制”之后，你会发现它比 <code>fixed</code> 更灵活，也更优雅。</p>
<p>下一次当你写 sticky 的时候，不妨回想这篇文章里说的几条冷知识。让你的样式也拥有一点“持久的粘性”。</p>
</div>
<br>
<div>
<h2>本文转载于：https://juejin.cn/post/7507073213865689138</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19037992
頁:
[1]