#fixedContent{width:400px;margin:0 auto;box-shadow:0 0 10px rgba(0,0,0,0.75)}
#fixedContent .titleBox{position:absolute;background:#eee;z-index:10;top:0;left:0;right:0;padding:25px;font-size:12px;border-top:1px solid #333}
.fixedTitle{position:relative;padding-top:52px}
.fixedBox{width: 100%;height: 500px;background: #333;}
01.
02.
03.
04.

<div id="fixedContent">
    <div class="fixedTitle">
        <p class="titleBox">Title #1</p>
        <div class="fixedBox"></div>
    </div>
    <div class="fixedTitle">
        <p class="titleBox">Title #2</p>
        <div class="fixedBox"></div>
    </div>
    ....
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

window.onscroll = function(){
    ;[].forEach.call(document.querySelectorAll('.fixedTitle'),function(o){
        var top = o.getBoundingClientRect().top,
            height = o.offsetHeight,
            childTitle = o.querySelector('.titleBox'),
            titleHeight = childTitle.offsetHeight;
            if (top <= (height * -1) + titleHeight) 
                childTitle.style.marginTop = (height - titleHeight)+'px';
            else if (top <= 0) 
                childTitle.style.marginTop= ((top * (-1)) - 1)+'px';
            else 
                childTitle.style.marginTop='0';
    });
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.