javascript - 将一个 div 分成两部分，一半显示在固定 div 下方，一半显示在上方

Question

我在页面中间有一个固定的 div。我有另一个包含图片库的 div。目前，图像按预期滚动“undearneath”固定的 div。但我想要一种图像永远不会隐藏在固定 div 下方的效果。与其深入到 div 之下，不如将它们分开，图像的一部分显示在下方，一部分显示在上方。本质上，我希望将一个 div(带有图像库的那个)分成两部分，一部分显示在固定 div 下方，一部分显示在上方。这里有一些精美的图形可以更好地说明我希望做什么。

我很乐意使用所需的 css/html/javascript 的任意组合。

这可能吗？

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

滚动一下

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

再滚动一点

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

Answer 1

在这里，我快速组合了 html、css 和 jquery，它们在 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>

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%;
}

和javascript代码:

    $(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());
          });
    });

希望你明白了 ;-)