css3利用sticky实现滚动标题变化效果

css3如何利用position: sticky实现滚动标题变化效果，下面web建站小编给大家详细介绍一下实现代码！

1、html代码

.container {
  background: #F2F6FC;
  height: 300px;
  width: 400px;
  overflow: auto;
}
.container div {
  height: 30px;
  background-color: #F2F6FC;
  border-bottom: 1px solid #fff;
.ext-align:center
}
.container .header {
  position: sticky;
  top: 0;
  background:#409EFF;
  color:#fff;
  padding:5px;
}
/*滚动条*/
::-webkit-scrollbar-track-piece {
  background-color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #ddd;
  background-clip: padding-box;
  min-height: 28px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

2、css3代码

<div class="container">
  <div class="header">HTML5</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="header">CSS3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="header">VUE</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="header">JQUERY</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div class="header">PHP</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>