Вывод даты сообщения при скролле
 

Доброго времени суток!

У меня такая проблема:
Есть чат, написан на php и js.
Есть скрипт-условие-событие, которое при наведении на время в сообщении делает типо hover эффект и показывает дату вверху окна чата.

Вот так:



Вот код:

$("body").on('mouseenter', '.main .chatbox > .contents > .chat_messages > ul > li > div >.right > .header > .tools > .timestamp', function(e) {
    $('.main .chatbox > .contents > .date').hide();
    if ($(this).parents('.message').find('.date').attr('message_sent_on') !== undefined) {
        var message_sent_on = $(this).parents('.message').find('.date').attr('message_sent_on');
        $('.main .chatbox > .contents > .date > span').text(message_sent_on);
        $('.main .chatbox > .contents > .date').show();
    }
});

$("body").on('mouseleave', '.main .chatbox > .contents > .chat_messages > ul > li > div >.right > .header > .tools > .timestamp', function(e) {
    $('.main .chatbox > .contents > .date').hide();
});

Собственно вопрос:

Как сделать так, чтобы не при наведении на время, а при скролле вверх или вниз показывалась дата сверху и исчезала при остановке скролла.

Заранее спасибо!

dvbshka,
информации недостаточно ...

let timer;
            $("body").on('scroll', function() {
                window.clearTimeout(timer);
                $('.main .chatbox > .contents > .date').show();
                timer = window.setTimeout(function() {
                    $('.main .chatbox > .contents > .date').hide();
                }, 100)
            })

Да, это работает как мне нужно, но оно саму дату не выводит почему то(
Просто черное пятно при скролле появляется и все.
Думаю это связанно с тем, что к скроллу нужно как то привязать действие или какой то триггер, который как в моем примере будет выводить дату, только у меня при наведении мыши она показывается, а нужно чтобы при скролле цеплялась к сообщению и показывала его дату.
Типо чтобы работало как в телеграмм, скроллишь и сверху показывается дата.

В консоли браузера, у каждого сообщения все данные есть



Скидываю файлы, которые связанны с этим делом, может сможете помочь(

В chatbox.php 115 по 117 строки.
В middle.js 153 по 164 строки (это то что я скидывал изначально)
messages.js тоже как то связан с датами итд.

Вложение 4872

dvbshka,
пробуйте ...

let timer, show = false;
            $("body").on('scroll', function() {
                window.clearTimeout(timer);
                if (!show) {
                    $("[message_sent_on]").each(function(i, el) {
                        let message_sent_on = el.getAttribute("message_sent_on");
                        el.querySelector("span").textContent = message_sent_on;
                        $(el).show();
                    })
                    show = true;
                }
                timer = window.setTimeout(function() {
                    $("[message_sent_on]").hide();
                    show = false;
                }, 100)
            })

рони,

Теперь происходит такая вещь.

Даты появились у каждого сообщения слева и не исчезают, при этом когда скроллишь, то все моргает, дата, сами сообщения,даже если остановить скролл.((

В консоли браузера стили меняются постоянно вот так:





Хотелось бы, чтобы дата выводилась при скролле один раз вверху страницы, а не у каждого сообщения.
Как в первом моем сообщении, но там это работает только при наведении на элемент.
Всю голову сломал, с js вообще не дружу:(


Может как то нужно привязаться к дате, которая сейчас по середине выводится (она показывается один раз, у первого сообщения за сутки) и с помощью этого показывать при скролле вверху эту дату?

dvbshka,
параметр 100, попробуйте увеличить от 300 до 800, может поможет.

рони,
Пробовал, тоже самое, но с большим интервалом

dvbshka,
ваши описания важны, но мне они слабо помогают разобраться, что вы хотите сделать и как это можно сделать, пока без вариантов.

рони,

Я понимаю, извините, просто сам не могу в голове собрать то, каким методом это сделать.

Хотел, чтобы работало вот так:

Чтобы сверху дата была закреплена при скролле и менялась в зависимости от даты сообщений как в этом видео из телеграмм.

https://cloud.nexofix.ru/index.php/s/YQgW4dGgLB3tQTd

Видео по ссылке, так как здесь нельзя добавлять mp4 файлы.

dvbshka,
мысли вслух: нужно сделать отдельный блок, в который будет выводится дата, ближайшего к верху окна сообщения.
и макет бы сделать ...

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони,
спасибо за совет, буду ковыряться, но чувствую шансов на успех, чуть больше чем 0 :)

дата сообщения при скролле
 

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>

рони,
Спасибо огромное!!! Понял с вашим шаблоном как это должно работать!
Буду пробовать, думаю это именно тот вариант, который мне нужен :thanks: