JSFiddle - React, Tailwind, and code Playground

HTML

<div id='stickybar'>
Visit my blog dude: <a href='http://beben-koben.blogspot.com'>Prodigy of Head</a>
<input type='button' id='closebtn' >
</div>
Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of  Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Prodigy of Head<p>Beben Koben

CSS

#stickybar {
    background:#555;
    font-size:16px;
    color:#FFF;
    padding:10px 20px;
    position:fixed;
    top:0;
    left:0;
    z-index:2000;
    width:100%;
    text-align:center;
}
#stickybar a {
       color:#FFF;
       text-decoration:none;
}
#stickybar a:hover {
       color:#AA0000;
}
#closebtn {
       background:url('http://3.bp.blogspot.com/-yl6foC85E0U/TbRPUVi8GPI/AAAAAAAABWI/yd3Bi5BkHoY/s1600/close.png') top no-repeat;
       border:none;
       margin-left:10px;
       position:absolute;
       width:20px;
       height:20px;
}

JavaScript

$(document).ready(function () {
    (function () {
        //settings
        var fadeSpeed = 300,
         fadeTo = 0.3,
         topDistance = 30;
        var sibar = function () {
            $('#stickybar').fadeTo(fadeSpeed, 1);
        },
         stbar = function () {
                $('#stickybar').fadeTo(fadeSpeed, fadeTo);
         };
        var inside = false;
        //do
        $(window).scroll(function () {
            position = $(window).scrollTop();
            if (position > topDistance && !inside) {
                //add mouseover events
                stbar();
                $('#stickybar').bind('mouseenter', sibar);
                $('#stickybar').bind('mouseleave', stbar);
                inside = true;
            } else if (position < topDistance) {
                sibar();
                $('#stickybar').unbind('mouseenter', sibar);
                $('#stickybar').unbind('mouseleave', stbar);
                inside = false;
            }
        });
        //close
        $('#closebtn').live('click', function (event) {
            $('#stickybar').toggle('show');
        });
    })();
});