javascript - 将日期粘在顶部，直到滚动期间出现新日期，就像 WhatsApp 中一样

Question

当您开始滚动时，我尝试对日期执行相同的操作，就像 WhatsApp 在移动设备和网络上所做的那样。这是一个关于这个主题的问题，但仅限于 Android，但我想在 HTML、CSS 和 JS 中执行此操作:

How to display a date like Whatsapp on scrolling 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)何时滚动出 View 并从顶部留出一点空间？如果是，我怎样才能将其粘贴在滚动边框框的顶部，直到下一个日期到来？

更新

在这里你可以明白我的意思:

Answer 1

这是一个 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>