Прикрепляйте дату вверх, пока во время прокрутки не появятся новые даты, как в WhatsApp

Question

Я пытаюсь сделать то же самое с датой, которую WhatsApp делает на мобильном телефоне и в Интернете, когда вы начинаете прокручивать. Вот вопрос об этой топи c, но только в Android, но я хочу сделать это в HTML, CSS и JS:

Как отобразить дату как Whatsapp при прокрутке ListView

Так что это мой фактический макет у меня есть:

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
}

#messages > div { 
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider {
 text-align: center;
}

.divider span {
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

<div id="messages">
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="divider">
    <span>22.02.2020</span>
  </div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="divider">
    <span>Heute</span>
  </div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
</div>

Есть ли какой-нибудь возможный способ обнаружить, когда дата (22.02.2020 или Heute) выходит из вида с небольшим пространством сверху? Если да, как я могу вставить это в верхнюю часть моего поля прокрутки, пока не появится следующая дата?

ОБНОВЛЕНИЕ

Здесь вы можете увидеть, что я имею в виду:

Answer 1

Использование CSS 'position: sticky; Вам нужно будет заключить каждую датированную группу сообщений в отдельный div. Ниже я заключил датированные группы в div с class="date-area", просто чтобы идентифицировать их. Я применил только стили к .divider. Вы можете видеть, что я добавил position: sticky; и top: 10px, чтобы прикрепить дату в десяти пикселях от верхней части окна просмотра при прокрутке:

Редактировать: Я добавил .spacer divs в нижней части группы дат, затем сместите метки даты к вершине на ту же высоту, что и проставки. Таким образом, метки даты полностью перекрываются, чтобы создать ощущение «замены» даты. Я не вижу никакой выгоды в клонировании метки даты, как это делает WhatsApp. Единственный способ, которым я могу придумать, чтобы полностью имитировать c это поведение, это использовать JS, и я не считаю хорошей практикой использовать JS для чисто презентационных целей, если нет какой-либо ощутимой выгоды. В чем выгода от полного дублирования дизайна WhatsApp?

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
}

#messages > div { 
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider {
  text-align: center;
  position: sticky;
  top: 10px;
}

.divider span {
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

.date-area {
  margin-top: -35px;
}

.spacer {
  height: 35px;
}

<div id="messages">
  <div class="date-area">
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="spacer">&nbsp;</div>
  </div>
  <div class="date-area">
    <div class="divider">
      <span>22.02.2020</span>
    </div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="spacer">&nbsp;</div>
  </div>
  <div class="date-area">
    <div class="divider">
      <span>Heute</span>
    </div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message left">Testnachricht</div>
    <div class="message right">Testnachricht</div>
    <div class="spacer">&nbsp;</div>
  </div>
</div>

Answer 2

Вот решение JS, чтобы дать вам представление о том, как вы могли бы сделать это с JS:

const topLabel = document.getElementById('date-label')
const messageBox = document.getElementById('messages')
messageBox.addEventListener('scroll', () => {
  const dateLabels = document.querySelectorAll('.divider')
  let currentLabel = null
  dateLabels.forEach((dateLabel) => {
    if(messageBox.scrollTop >= dateLabel.offsetTop)
    {
      currentLabel = dateLabel
    }
  })
  if(currentLabel) {
    topLabel.style.opacity = '1'
    topLabel.innerText = currentLabel.innerText
  } else {
    topLabel.style.opacity = '0'
  }
})

#messages {
  border: 1px solid;
  max-height: 200px;
  overflow-y: scroll;
  position: relative;
}

#messages > div { 
  margin-bottom: 15px;
  padding-left: 3%;
  padding-right: 3%;
}

.message.right {
  text-align: right;
}

.divider {
  text-align: center;
}

.divider span {
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  line-height: 1;
  background: gray;
  color: #fff;
  border-radius: 6px;
}

.sticky {
  position: sticky;
  top: 10px;
}

<div id="messages">
  <div class="divider sticky">
    <span id="date-label" style="opacity: 0;">22.02.2020</span>
  </div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="divider">
    <span>22.02.2020</span>
  </div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="divider">
    <span>Heute</span>
  </div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message right">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message left">Testnachricht</div>
  <div class="message right">Testnachricht</div>
</div>