title: Make current date stick to top of page
body: <p>I have noticed many chat apps like "Slack", "Discord" and "Skype" will display the date <code>fixed</code> &amp; <code>sticky</code> 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.</p>
  
  <p>Is it possible to tell it with JS to be <code>position:sticky</code> for the last one that was in view? Scrolling both up or down?</p>
  
  <p>I created a <strong><a href="http://jsfiddle.net/a8mb5yr7/1/" rel="nofollow noreferrer">JS FIDDLE</a></strong> of the layout and embedded it into this question also.</p>
  
  <p>Thanks for any help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  
  
  &lt;li class="date"&gt;Date: 1/21/2019&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="date"&gt;Date: 1/22/2019&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="date"&gt;Date: 1/23/2019&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="date"&gt;Date: 1/24/2019&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="date"&gt;Date: 1/25/2019&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;li class="msg"&gt;&lt;span class="user"&gt;Username: &lt;/span&gt;Hello this is a test message. I am messaging you from messages about messages that message&lt;/li&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>