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

創(chuàng)新互聯(lián)擁有網(wǎng)站維護(hù)技術(shù)和項(xiàng)目管理團(tuán)隊(duì)，建立的售前、實(shí)施和售后服務(wù)體系，為客戶提供定制化的網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、西部信息機(jī)房解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、商城開發(fā)、政府網(wǎng)站等各類型客戶群體，為全球上千多家企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。

sticky

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

sticky元素總是創(chuàng)建一個(gè)新的層疊上下文（stacking context） ，一個(gè)sticky元素會(huì)“固定”在離它最近的一個(gè)擁有“滾動(dòng)機(jī)制”的祖先上（當(dāng)該祖先的overflow 是 hidden, scroll, auto, 或 overlay時(shí)），即便這個(gè)祖先不是最近的真實(shí)可滾動(dòng)祖先。（Github issue on W3C CSSWG）

實(shí)際效果展示

下面看一個(gè)關(guān)于粘性定位元素滑動(dòng)時(shí)的效果圖。

可以看到list在向上滑動(dòng)時(shí)，當(dāng) list item 17 stickyTop 滑到在滾動(dòng)塊的頂部時(shí)，便粘在頂部不在跟著滑動(dòng)，其余元素繼續(xù)滑動(dòng)，該元素的偏移量 top 為0。當(dāng)list向下滑動(dòng)式 list item 24 stickyBottom 滑到底部時(shí)便粘在底部，其余元素繼續(xù)滑動(dòng)，該元素的偏移量 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 在滑動(dòng)時(shí)粘在距離頂部30px的位置，24 粘在距離底部40px的位置。

應(yīng)用場(chǎng)景

• 長(zhǎng)列表滑動(dòng)時(shí)，最近子標(biāo)題固定（粘在）頂部
• 表格的表頭、首行、首列、末列滑動(dòng)時(shí)分別固定頂部、頂部、左側(cè)、右側(cè)
• 頁面滑動(dòng)時(shí)，重要信息塊粘在頂部
• 頁面滑動(dòng)時(shí)，特定元素始終保持在頁面之內(nèi)。

Note

• 注意分清粘性定位的作用域，層疊上下文，避免因多個(gè)滾動(dòng)塊或者滾動(dòng)塊層級(jí)有誤造成未達(dá)到目標(biāo)效果

案例代碼

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 || ''}`}
                        

            網(wǎng)站標(biāo)題：CSS粘性定位positionsticky用法詳解-創(chuàng)新互聯(lián)            

            轉(zhuǎn)載注明：http://weahome.cn/article/dpgehp.html