我注意到许多聊天应用程序,如"Slack","Discord"和"Skype"将显示日期fixed和sticky"页面"的顶部,具体取决于您当前滚动到的内容的哪一部分(在视图中).我正在设计一个聊天应用程序,我正在努力实现同样的目标.
是否有可能告诉它JS对于视图中的最后一个是"位置粘滞"？向上或向下滚动？
我创建了一个布局的JS FIDDLE,并将其嵌入到这个问题中.
谢谢你的帮助!
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 …