dvbshka,
про макет...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.message {
height: 100px;
width: 100%;
border: 1px solid red;
}
.chat_messages {
height: 300px;
width: 400px;
}
.show_data {
border: 5px solid #FFFF00;
height: 40px;
width: 100px;
position: fixed;
opacity: 0;
transition: .6s;
}
.show_data.show {
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let timer;
let div = document.querySelector(".show_data");
document.addEventListener("scroll", function() {
window.clearTimeout(timer);
let lis = document.querySelectorAll(".message");
let li;
for (li of lis) {
let {
top
} = li.getBoundingClientRect();
if (top > 0) {
let date = li.querySelector(".date");
let txt = date.getAttribute("message_sent_on");
div.textContent = txt;
div.classList.add("show");
break;
}
}
timer = window.setTimeout(function() {
div.classList.remove("show")
}, 100)
})
})
</script>
</head>
<body>
<div class="chat_messages">
<div class="show_data"></div>
<ul>
<li class="message"><span class="date" message_sent_on=1><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=2><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=3><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=4><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=5><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=6><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=7><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=8><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=9><span></span></span>
</li>
<li class="message"><span class="date" message_sent_on=10><span></span></span>
</li>
</ul>
</div>
</body>
</html>