Javascript-форум - Вывод даты сообщения при скролле

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>