如何運用position-sticky實現粘性布局？

如何運用position:sticky實現粘性布局？

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！

前言

如果問，CSS 中 position 屬性的取值有幾個？

大部分人的回答是，大概是下面這幾個吧？

{
 position: static;
 position: relative;
 position: absolute;
 position: fixed;
}

sticky 英文字面意思是粘，粘貼，所以姑且稱之為粘性定位。下面就來了解下這個處于實驗性的取值的具體功能及適用場景。這是一個結合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位，適用于一些特殊場景。

什么是結合兩種定位功能于一體呢？

元素先按照普通文檔流定位，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而后，元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

兼容性

講述具體示例之前，還是很有必要了解一下 position:sticky 的兼容性，除了IE以外了，其他新版瀏覽器都是Ok的，當然，很多老瀏覽器都是不行的。[CSS兼容性查詢網址](https://www.caniuse.com)

如何運用position:sticky實現粘性布局？

IOS 家族（SAFARI && IOS SAFARI）和 Firefox 很早開始就支持 position:sticky 了。而 Chrome53~55 則需要啟用實驗性網絡平臺功能才行。其中 webkit 內核的要添加上私有前綴 -webkit-。

position:sticky 示例

看看下面這張 GIF 圖，想想要實現的話，使用 JS + CSS 的方式該如何做？

如何運用position:sticky實現粘性布局？

按照常規做法，大概是監聽頁面 scroll 事件，判斷每一區塊距離視口頂部距離，超過了則設定該區塊 position:fixed，反之去掉。

而使用 position:sticky ，則可以非常方便的實現

<div class="container">
 <div class="sticky-box">Javan的博客</div>
 <div class="sticky-box"></div>
 <div class="sticky-box">慕課網</div>
 <div class="sticky-box">Sticky</div>
</div>

.container {
 background: #eee;
 width: 600px;
 height: 1000px;
 margin: 0 auto;
}
.sticky-box {
 position: -webkit-sticky;
 position: sticky;
 height: 60px;
 margin-bottom: 50px;
 background: #10af7e;
 top: 0px;
}
div {
 font-size: 30px;
 text-align: center;
 color: #fff;
 line-height: 60px;
}

只需要給每個內容塊添加`position: -webkit-sticky;position: sticky;`就可以輕松實現了。

注意

position:sticky 的生效是有一定的限制的，總結如下：

1. 須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高。

2. 設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下：

> 如果 position:sticky 元素的任意父節點定位設置為 overflow:hidden，則父容器無法進行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。

> 如果 position:sticky 元素的任意父節點定位設置為 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。

3. 達到設定的閥值。這個還算好理解，也就是設定了 position:sticky 的元素表現為 relative 還是 fixed 是根據元素是否達到設定了的閾值決定的。

公告

喜歡小編記得點擊關注，了解更多資源哦！

近遇見一個吸頂效果的需求，要想實現這個效果，使用UI庫也可以，但如果使用position的sticky粘黏屬性可以輕易實現，但在實際使用中需要注意一些細節，于是寫了個簡單demo，效果如下

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sticky</title>
  <style>
    html,body{
      height: 100%;
    }
    .wrap{
      overflow: auto;
      height: 100%;
    }
    .div1{
      height: 30px;
      background: red;
      text-align: center;
      line-height: 30px;
      color: aliceblue;
      position: sticky;
      top: 0;
    }
    .div2{
      height: 500px;
      background: #333;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="div1">A</div>
    <div class="div2"></div>
    <div class="div1">B</div>
    <div class="div2"></div>
    <div class="div1">C</div>
    <div class="div2"></div>
    <div class="div1">D</div>
    <div class="div2"></div>
  </div>
</body>
</html>

ps:

sticky 元素會“固定”在離它最近的一個擁有“滾動機制”的祖先上
sticky會創建一個新的BFC(塊級格式化上下文)
須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同,一般設置top:0

osition: sticky; 基于用戶的滾動位置來定位。

粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。

在目標區域以內，它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。

元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。

使用條件：

1、父元素不能overflow:hidden或者overflow:auto屬性。

2、必須指定top、bottom、left、right4個值之一，否則只會處于相對定位

3、父元素的高度不能低于sticky元素的高度

4、sticky元素僅在其父元素內生效

---------------------

在線咨詢

上一篇：2022年新泰市面向社會公開招聘教師筆試準考證打印入
下一篇：從相機標定到SLAM，極簡三維視覺六小時課程視頻（附

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何運用position-sticky實現粘性布局？

前言

兼容性

position:sticky 示例

注意

公告

您的項目需求