JSFiddle - React, Tailwind, and code Playground

by bohdantheone

HTML

<script type="text/javascript"> 
window.onload = function() { setTimeout (function() {aaa.innerHTML=""}, 10000)} 
</script> 
<div id="aaa">Какой-то текст</div>

CSS

#messageTop
{
    display: block;
    display: none;
    z-index: 999; 
    opacity: 0.9;
    position: fixed;
    left: 50%; /* = центрируем блок */
    margin-left: -520px; /* = половина ширины блока */
    width: 1040px;
    height: 50px;
    background-color: #fff
}

JavaScript

$(function () {
    var scroll_timer;
    var displayed = false;
    var $message = $('#messageTop'); // id блока
    var $window = $(window);
    var top = $(document.body).children(0).position().top;
    $window.scroll(function () {
        window.clearTimeout(scroll_timer);
        scroll_timer = window.setTimeout(function () {
            if($window.scrollTop() <= top)
            {
                displayed = false;
                $message.fadeOut(500); // время скрытия блока
            }
            else if(displayed == false)
            {
                displayed = true;
                $message.stop(true, true).show().click(function () { $message.fadeOut(500); });
            }
        }, 100);
    });
});