CSS粘性定位position sticky用法詳解

這篇文章給大家分享的是有關CSS粘性定位position sticky用法詳解的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

sticky

css屬性position為sticky的元素，根據正常的文檔流（flow of the document）進行定位，然后相對它的最近滾動祖先（nearest scrolling ancestor）和 containing block (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值進行偏移。該偏移量不會影響任何其他元素的位置。

sticky元素總是創建一個新的層疊上下文（stacking context） ，一個sticky元素會“固定”在離它最近的一個擁有“滾動機制”的祖先上（當該祖先的overflow 是 hidden, scroll, auto, 或 overlay時），即便這個祖先不是最近的真實可滾動祖先。（Github issue on W3C CSSWG）

實際效果展示

下面看一個關于粘性定位元素滑動時的效果圖。

可以看到list在向上滑動時，當 list item 17 stickyTop 滑到在滾動塊的頂部時，便粘在頂部不在跟著滑動，其余元素繼續滑動，該元素的偏移量 top 為0。當list向下滑動式 list item 24 stickyBottom 滑到底部時便粘在底部，其余元素繼續滑動，該元素的偏移量 bottom 為0。

list item 17 stickyTop 和 list item 24 stickyBottom 的css屬性如下：

// list item 17 stickyTop
{
  position: sticky;
  top: 0;
  background: aqua;
}

// list item 24 stickyBottom
{
  position: sticky;
  bottom: 0;
  background: aqua;
}

修改偏移量后再次嘗試

list item 17 stickyTop 和 list item 24 stickyBottom 的css屬性如下：

// list item 17 stickyTop
{
  position: sticky;
  top: 30px;
  background: aqua;
}

// list item 24 stickyBottom
{
  position: sticky;
  bottom: 40px;
  background: aqua;
}

修改之后，17 在滑動時粘在距離頂部30px的位置，24 粘在距離底部40px的位置。

應用場景

• 長列表滑動時，最近子標題固定（粘在）頂部
• 表格的表頭、首行、首列、末列滑動時分別固定頂部、頂部、左側、右側
• 頁面滑動時，重要信息塊粘在頂部
• 頁面滑動時，特定元素始終保持在頁面之內。

Note

• 注意分清粘性定位的作用域，層疊上下文，避免因多個滾動塊或者滾動塊層級有誤造成未達到目標效果

案例代碼

jsx

import React from 'react';
import classnames from 'classnames';
import styles from './dashboard.less';

const arr = new Array(40).fill({});
const list = arr.map((val, idx) => {
  if (idx === 17) {
    return {
      ...val,
      key: idx,
      title: 'stickyTop',
      sticky: true,
      className: styles.stickyTop,
    };
  }
  if (idx === 24) {
    return {
      ...val,
      key: idx,
      title: 'stickyBottom',
      sticky: true,
      className: styles.stickyBottom,
    };
  }
  return { ...val, key: idx };
});

export default () => {
  return (
    
     
       
         {list.map((v, index) => (
            
             {`list item ${index} ${v.title || ''}`}
            
         ))}
        
     
   
 );
};

less

.container {
  width: 400px;
  height: 500px;
  margin: auto;
  overflow: auto;
  background: aquamarine;
  .wrap {
    display: flex;
    height: 1000px;
    .list {
      width: 240px;
      height: 360px;
      margin: auto;
      overflow: auto;
      background: #fff;
      .item {
        color: #333;
        font-size: 16px;
      }
      .sticky {
        background: aqua;
      }
      .stickyTop {
        position: sticky;
        top: 0;
      }
      .stickyBottom {
        position: sticky;
        bottom: 0;
      }
    }
  }
}

感謝各位的閱讀！關于CSS粘性定位position sticky用法詳解就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！