关于position：sticky实现滚动标题置顶固定后面制作动图显示样式，个人笔记

哒哒哒~小马驹

于 2019-04-10 11:07:03 发布

阅读量937

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人总结文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_41869039/article/details/89177122

个人总结专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS中的`position: sticky`属性如何用于实现滚动时标题置顶固定的效果。通过详细的技术讲解和实例，展示了在网页布局中运用此技巧的方法。并附带了动图展示，帮助读者直观理解样式变化过程。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>position: sticky</title>
</head>
<style>
  * {
    box-sizing: border-box;
  }

  div {
    height: 320px;
    overflow: auto;
  }

  dl {
    margin: 0;
    padding: 24px 0 0 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: -1px;
  }

  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>
<body>
  <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>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>
    </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>
    </dl>
  </div>
</body>
</html>

在这里插入图片描述