Стек css липких элементов в пределах одной прокрутки - PullRequest
Новая
       6

Стек css липких элементов в пределах одной прокрутки

0 голосов
/ 09 января 2019

Я использую css position: sticky и у меня есть липкий элемент Header в корне и липкий элемент dt для каждой секции внутри dl элемента.

Но в настоящее время dt элемент переполняет заголовок элемента, когда застрял. Есть ли чистый CSS способ сделать элементы dt застрявшими ниже заголовка , если мы не знаем высоту заголовка ? Содержимое заголовка является динамическим, оно может переноситься при изменении ширины окна. 

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px 12px;
  color: white;
  font-size: 20px;
  border: 1px solid #6783fc;
  background-color: #3c5fe8;
}

dl > div {
  padding: 24px 0 0 0;
  background: #FFF;
}

dt {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  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;
}

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;
}
<div class="header">
  Header
</div>

<dl>
  <div>
    <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>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
</dl>
...