JSFiddle - React, Tailwind, and code Playground

HTML

<div id='content'>
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
    <img src='http://lorempixel.com/200/250/' alt='img' />
</div>
<div id='middle'></div>

CSS

#middle{
    position:fixed;
    top:50%;
    z-index:100;
    margin-top:-25px;
    height:70px;
    width:100%;
    background:#999;
}

#top,#bottom{
    top:0;
    width:100%;
    background:#fff;
}

#top{
    position:fixed;
    z-index:50;
    overflow:hidden;
}
#top_content{
    position:relative;
}

#bottom{
    position:absolute;
    z-index:25;
}

JavaScript

(function(w,d){
    var top = d.getElementById('content'),
        bottom = top.cloneNode(true),
        middle = d.getElementById('middle'),
        top_content = d.createElement('div');
    
    top.id = 'top';
    bottom.id = 'bottom';
    top_content.id = 'top_content';
    
    
    top_content.innerHTML = top.innerHTML;
    top.innerHTML = '';
    
    
    top.style.display = 'none'; //more efficient to change the style while the element is not displayed, and then display
    
    top.style.height = middle.offsetTop + 'px';
    
    bottom.style.paddingTop = middle.scrollHeight + 'px';
    console.log(middle.scrollHeight);
    
    top.parentNode.appendChild(bottom);
    top.appendChild(top_content);
    top.style.display = bottom.style.display = 'block';
    
    w.addEventListener('scroll', function(){
        var y = (w.pageYOffset !== undefined) ? w.pageYOffset : (d.documentElement || d.body.parentNode || d.body).scrollTop;
        top_content.style.top = -y + 'px';
    }, false);
})(window, document);