Make current date stick to top of page

Question

I have noticed many chat apps like "Slack", "Discord" and "Skype" will display the date fixed & sticky to the top of the "page" depending what part of the content you are currently scrolled to (in view). I am styling a chat app and am trying to accomplish the same.

Is it possible to tell it with JS to be position:sticky for the last one that was in view? Scrolling both up or down?

I created a JS FIDDLE of the layout and embedded it into this question also.

Thanks for any help!

body {margin:0; background:lightgray;}
ul, li {
  list-style-type: none;
  padding:0px;
  margin:0px;
}
.user {font-weight:bold; padding-right: 5px;}
.msg{
 display:flex;
 background:white;
 margin: 20px;
 margin-left:5px;
 padding: 20px;
 border-radius: 10px;
}
.date {width:100%; background: tomato; text-align:center; padding: 15px; color:white; font-weight:bold; }

<ul>


<li class="date">Date: 1/21/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/22/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/23/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/24/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/25/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

</ul>

Answer 1

Is this?

I added position:sticky and top:0

position:sticky usable with only top or bottom propertys. (top or bottom for vertical scroll, left or right for horizontal scroll)

body {margin:0; background:lightgray;}
ul, li {
  list-style-type: none;
  padding:0px;
  margin:0px;
}
.user {font-weight:bold; padding-right: 5px;}
.msg{
 display:flex;
 background:white;
 margin: 20px;
 margin-left:5px;
 padding: 20px;
 border-radius: 10px;
}
.date {width:100%; background: tomato; text-align:center; padding: 15px; color:white; font-weight:bold;
position:sticky;
top:0;
}

<ul>


<li class="date">Date: 1/21/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/22/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/23/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/24/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="date">Date: 1/25/2019</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

<li class="msg"><span class="user">Username: </span>Hello this is a test message. I am messaging you from messages about messages that message</li>

</ul>