Result

jQuery

function Up() {
    $(".head").each(function() {
        var el = $(this),
            offset = el.offset(),
            s = $(window).scrollTop(),
            f = $(".floating", this);
            //位置に応じて表示/非表示の条件分岐
            if ((s > offset.top) && (s < offset.top + el.height())) {
                f.css({
                    "visibility": "visible"
                });
            } else {
                f.css({
                    "visibility": "hidden"
                });
            };
    });
}
$(function() {
    var clone;
    $(".head").each(function() {
        //要素のクローンを作成してスクロールに追従させる
        clone = $(".title", this);
        clone.before(clone.clone()).css("width", clone.width()).addClass("floating");
    });
    $(window).scroll(Up).trigger("scroll");
});

css

.floating {
position: fixed;
top: 0;
visibility: hidden;
}
div{height:1500px;}

h1,h2,h3{
    padding:25px;
}

h1{background:#eee;}
h2{background:#efc7de;}
h3{background:#94b4bf;}

html

<div class="head">
<h1 class="title">Head01</h1>
</div>
<div class="head">
<h2 class="title">Head02</h2>
</div>
<div class="head">
<h3 class="title">Head03</h3>
</div>

via

Persistent Headers | CSS-Tricks