前端开发中的“粘性”魔法，让页面交互如丝般顺滑

回想一下在过去的那些日子里当我们想要实现一个“吸顶导航”或者“随页面滚动的侧边栏”时是不是总得搬出 JavaScript 这把大杀器？我们得像守财奴一样死死盯着 window.onscroll 事件，不停地去计算 scrollTop 的值，还要判断元素距离顶部的偏移量。一旦计算稍微有点偏差，页面就会出现那种让人心烦意乱的抖动，或者性Neng直接掉到底盘。

但说实话，时代变了。现在的 CSS Yi经强大到让我们Ke以扔掉那些繁琐的 JS 监听代码了。今天我们就来深挖一下 position: sticky 这个属性，kankan它是如何用极简的代码，搞定曾经让我们头秃的复杂交互的。

Ru果你去翻阅官方文档，可Neng会kan到一堆晦涩难懂的定义。但在我眼里position: sticky 其实就是相对定位和固定定位的“混血儿”。它聪明得hen，懂得审时度势。

简单来说当元素在屏幕内，还没有达到设定的阈值时它表现得就像 relative，老老实实地待在文档流里；可一旦你滚动页面让它碰到了那个“阈值”，它就会突然“黑化”，摇身一变成为 fixed，死死地钉在视口的某个位置上。

这种特性，简直就是为导航栏、侧边栏以及各种列表标题量身定Zuo的。它不像 fixed 那样永远占据屏幕，也不像 relative 那样随波逐流。它就在那里不远不近，恰到好处。

hen多新手刚开始用这个属性时发现完全没反应，Zui后往往是因为漏掉了一个关键点。光写 position: sticky 是不够的，你必须告诉浏览器“粘”在哪里。

.sticky-element {
  position: sticky;
  top: 0; /* 必须指定 top, bottom, left 或 right 中的一个 */
}

kan到了吗？top: 0 是灵魂。Ru果没有这个值，元素就不知道该在什么时候停下来sticky 效果也就无从谈起了。当然你也Ke以设置 top: 20px，让它距离顶部留点空隙，全kan你的设计需求。

这是ZuiZuiZui常见的场景。用户在浏览网页时希望导航栏始终触手可及，但又不想它一开始就遮挡住首屏的精美 Banner 图。

以前我们得写个函数监听滚动，现在呢？几行 CSS 搞定。下面这个案例展示了一个典型的卡片式布局，当你向下滚动那个白色的演示区域时深蓝色的导航栏会自动吸附在顶部。

  

    演示区域
    

      
我是普通头部
      
🧲 导航栏 · 我会粘在顶部
      

        
第1条内容：试着向下滚动kankan...
        
第2条内容：导航栏是不是一直停在上面？
        
第3条内容：这就是 sticky 的魔力。
        
第4条内容：不需要写一行 JS 代码。
        
第5条内容：性Neng极佳，丝般顺滑。
      
    
  

你手机里的通讯录是不是这样用的？滚到“A”开头的联系人时“A”标题会停在顶部；继续滚到“B”，“B”会把“A”顶上去。这种交互体验非常棒，Neng让用户时刻知道自己处于哪个分区。

用 position: sticky 实现这个效果简直易如反掌。我们只需要给每个分组的标题dou加上这个属性即可。

  

    

      🌟 A 组 · 设计部
      
Alice
Amanda
Alex
    
    

      🔥 B 组 · 市场部
      
Bob
Bella
Ben
    
    

      🌿 C 组 · 技术部
      
Chris
Ciara
Carlos
    
  

博客或者文档页面左边是长长的文章，右边是目录或广告。我们希望用户读文章时目录Neng一直跟着，但又不Neng超出它自己的容器范围。

这个场景稍微复杂一点，因为涉及到 Flex 布局。hen多开发者在这里踩过坑，发现 sticky 失效了。其实通常是因为父容器的高度不够，或者 Flex 的对齐方式出了问题。

  

    
    

      
第1条：左侧内容滚动时...
      
第2条：右侧侧边栏会保持不动。
      
第3条：前提是父容器高度足够。
      
第4条：且 align-items 为 flex-start。
      
第5条：纯CSS实现，性Neng极佳。
    
  

虽然 position: sticky hen好用，但它也有自己的小脾气。Ru果你发现代码写得明明没问题，可元素就是不粘，那多半是碰到了下面这几个情况：

这是Zui常见的“杀手”。Ru果你给 sticky 元素的任意一级父容器设置了 overflow: hiddenoverflow: auto 或者 overflow: scroll，sticky 就会失效。因为这时候，该元素的滚动容器不再是视口，而是那个父元素，导致定位计算混乱。

sticky 元素需要在其父容器范围内活动。Ru果父容器的高度比 sticky 元素本身高不了多少，甚至geng矮，那它根本没有空间去“粘”，自然也就kan不到效果了。

在侧边栏案例中，Ru果主内容区的高度比侧边栏还短，那侧边栏还没来得及粘住滚动就结束了。所以要保证内容区足够长，Neng产生滚动条。

从性Neng角度来kan，CSS 肯定是完胜 JS 的。JS 监听滚动事件是在主线程运行的，频繁触发还会导致重排和重绘，在移动端可Neng会造成卡顿。而 position: sticky 是浏览器原生支持的，通常由合成线程处理，不会阻塞主线程，动画效果自然如丝般顺滑。

至于兼容性，现代浏览器douYi经完美支持了。至于那个古老的 IE 浏览器……嗯，Ru果你还需要兼容 IE11，那可Neng还是得用 JS Zuo个降级处理，或者用 Polyfill。但为了那一点点存量用户去牺牲大部分用户的体验，显然是不划算的。我们Ke以采用“渐进增强”的策略：支持 sticky 的浏览器享受丝滑体验，不支持的则按普通流布局展示，虽然不吸顶，但至少功Neng可用。

前端技术日新月异，CSS 的Neng力早Yi超出了我们的想象。以前我们不得不依赖 JavaScript 才Neng实现的复杂交互，现在往往几行 CSS 就Neng搞定，而且性Nenggeng好，代码geng易维护。

position: sticky 就是这样一种“小而美”的属性。它不仅解放了我们的双手，让我们告别了繁琐的滚动监听逻辑，geng重要的是它提升了网页的用户体验。所以下次当你再需要Zuo吸顶导航、粘性侧边栏或者通讯录列表时别再第一时间去写 JS 了试试 CSS 吧！相信我，你会爱上这种简洁之美的。

Ru果这篇文章让你对 CSS 刮目相kan，点个赞，转个发，收藏下，让geng多朋友kan到——CSS 真的在吃掉前端！