How to show floating block after scroll JavaScript 05.09.2015

Simple note that shows floating block with content after scroll on some value.

HTML snippet

<div id="floating-block">
    <h3>{{post.title}}</h3>
</div>

CSS snippet

#floating-block {
    padding: 5px;
    position: fixed;
    background: #f5f2eb;
    border-bottom: 1px solid #fff;
    box-shadow: 0 1px 4px 0 rgba(61,36,9,0.3);
    transition: transform 0.5s;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 1000;
}

JS snippet

<script src="http://code.jquery.com/jquery-latest.js"></script<
<script>
$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        // show after some height
        var showAfter = $('#post-title').offset().top;

        if (scroll >= showAfter) {
            $("#floating-block").show();
        } else {
            $("#floating-block").hide();
        }
    });
});
</script>