position:sticky

作者: 星球小霸王 | 来源:发表于2018-06-02 10:19 被阅读0次

position:sticky和display:grid
position:sticky
IOS的那些定位
网页布局之粘性布局
css粘性定位position: sticky
粘性定位
简单页面吸顶效果
position:sticky
position:sticky
position:sticky

粘性定位

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

//例如
#one { position: sticky; top: 10px; }

当窗口滚动到元素距离元素的top值属性大于10px 的时候，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到窗口回滚到阈值以下。

下面是案例(手机通讯录联系人的字母黏贴)

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<title>position:sticky</title>
<style>
*{
  padding: 0;
  margin: 0;
}
dl {
  margin: 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC
}

</style>
</head>
<body>
    <!-- Learn about this code on MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position -->

    <div>
      <dl>
        <dt>A</dt>
        <dd>Andrew W.K.</dd>
        <dd>Apparat</dd>
        <dd>Arcade Fire</dd>
        <dd>At The Drive-In</dd>
        <dd>Aziz Ansari</dd>
      </dl>
      <dl>
        <dt>B</dt>
        <dd>Bhromeo</dd>
        <dd>Bommon</dd>
        <dd>Bonverge</dd>
        <dd>Brystal Bastles</dd>
        <dd>Bursive</dd>
      </dl>
      <dl>
        <dt>C</dt>
        <dd>Chromeo</dd>
        <dd>Common</dd>
        <dd>Converge</dd>
        <dd>Crystal Castles</dd>
        <dd>Cursive</dd>
      </dl>
      <dl>
        <dt>E</dt>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
        <dd>Explosions In The Sky</dd>
      </dl>
      <dl>
        <dt>T</dt>
        <dd>Ted Leo & The Pharmacists</dd>
        <dd>T-Pain</dd>
        <dd>Thrice</dd>
        <dd>TV On The Radio</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
        <dd>Two Gallants</dd>
      </dl>
    </div>
</body>
</html>