Break a div into two parts and display half below a fixed div and half above

Question

I have a fixed div halfway down the page. I have another div that contains a gallery of images. Currently the images scroll 'undearneath' the fixed div as expected. But I'm going for an effect where the images are never hidden beneath the fixed div. Instead of going undereath the div, they'd be split up, with part of the image displaying below and part above. Essentially I'm looking to break one div (the one with the gallery of images) into two parts, with part displaying below the fixed div and part above. Here's some fancy graphics to better illustrate what I'm hoping to do.

I'm happy to use any combination of css/html/javascript that is required.

Is it possible?

  Current Behavior           Desired Behavior
|===================|     |===================|
|  =====    =====   |     |  =====    =====   |
| |     |  |     |  |     | |     |  |     |  |
| | img |  | img |  |     | | img |  | img |  |
| |  1  |  |  2  |  |     | |  1  |  |  2  |  |
|  =====    =====   |     |  =====    =====   |
|===================|     |===================|
|   fixed   div     |     |   fixed   div     |
|===================|     |===================|
| |  3  |  |  4  |  |     |  =====    =====   |
|  =====    =====   |     | |     |  |     |  |
|  =====    =====   |     | | img |  | img |  |
| |     |  |     |  |     | |  3  |  |  4  |  |
| | img |  | img |  |     |  =====    =====   |
|===================|     |===================|

scroll a bit

|===================|     |===================|
| | img |  | img |  |     | | img |  | img |  |
| |  1  |  |  2  |  |     | |  1  |  |  2  |  |
|  =====    =====   |     |  =====    =====   |
|  =====    =====   |     |  =====    =====   |
| |     |  |     |  |     | |     |  |     |  |
|===================|     |===================|
|   fixed   div     |     |   fixed   div     |
|===================|     |===================|
|  =====    =====   |     | | img |  | img |  |
| |     |  |     |  |     | |  3  |  |  4  |  |
| | img |  | img |  |     |  =====    =====   |
| |  5  |  |  6  |  |     |  =====    =====   |
|  =====    =====   |     | |     |  |     |  |
|===================|     |===================|

scroll a bit more

|===================|     |===================|
|  =====    =====   |     |  =====    =====   |
|  =====    =====   |     |  =====    =====   |
| |     |  |     |  |     | |     |  |     |  |
| | img |  | img |  |     | | img |  | img |  |
| |  3  |  |  4  |  |     | |  3  |  |  4  |  |
|===================|     |===================|
|   fixed   div     |     |   fixed   div     |
|===================|     |===================|
| | img |  | img |  |     |  =====    =====   |
| |  5  |  |  6  |  |     |  =====    =====   |
|  =====    =====   |     | |     |  |     |  | 
|  =====    =====   |     | | img |  | img |  |
| |     |  |     |  |     | |  5  |  |  6  |  |
|===================|     |===================|

Answer 1

Here I quickly put together a combination of html, css and jquery, that worked for me in Chrome.

jsfiddle demo

html:

    <div id="toppart">
        <div class="tiles">
            <div class="tile">1</div>
            <div class="tile">2</div>
            <div class="tile">3</div>
            <div class="tile">4</div>
            <div class="tile">5</div>
            <div class="tile">6</div>
        </div>
    </div>
    <div id="strap">
        <p>the fixed strap</p>
    </div>
    <div id="bottompart"></div>

crucial part of css:

#strap {
    position:absolute;
    top:45%;
    height: 10%;
    background-color:blue;
}
#toppart, #bottompart {
    background-color:#fff;
    position:absolute;
    height:45%;
    overflow:auto;
}
#bottompart {
    top:55%;
    z-index:-1;
}

#bottompart div {
    position:relative;
    top:-100%;
}

and the javascript code:

    $(document).ready(function () {
          //mirror contents
          $('#bottompart').append($('#toppart').html());
          //scroll bottom with top
          $("#toppart").scroll(function(){
                 $("#bottompart").scrollTop($("#toppart").scrollTop());
          });
          //scroll top with bottom
          $("#bottompart").scroll(function(){
                 $("#toppart").scrollTop($("#bottompart").scrollTop());
          });
    });

Hope you get the idea ;-)

Answer 2

This is not possible with CSS. The only viable implementation I see is to have a top and bottom div with exactly the same content, listen to their onscroll events, and then 'sync' them to the other with the required gap. You would need some degradation for iOS devices though because they don't send onscroll events until scroll is finished.