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

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

У меня такая проблема:
Есть чат, написан на 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.