Question

我在页面中间有一个固定的div。我有另一个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());
          });
    });

希望你明白这一点; - ）

Answer 2

CSS无法实现。我看到的唯一可行的实现是让顶部和底部div具有完全相同的内容，听取他们的onscroll事件，然后将它们“同步”到具有所需间隙的另一个。虽然因为在滚动完成之前它们不发送onscroll事件，但是你需要对iOS设备进行一些降级。

Answer 3

这是解决此问题的一种方法，但它使用JavaScript。

我使用JavaScript复制原始内容并分为两部分。（这样你不必提供两倍的内容）

顶部的z-index比底部高，溢出隐藏，位置固定。高度设置为从页面顶部到中间元素的距离。其内容将移动到此部分中的包装div中，使其像视口一样运行。

底部与顶部对齐，但顶部的衬垫等于中间部分（将内容向下推动该量）。顶部部分覆盖了上半部分的内容，因此您只能看到中间元素下方的部分（最高z-index）。

这样做的一个问题是它需要顶部有一个背景，需要匹配页面的背景。

我在这里放了一个演示：http://jsfiddle.net/Rykus0/mwkM8/

HTML：

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

JS：

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

CSS：

#middle{
    position:fixed;
    top:50%;
    z-index:100;
    margin-top:-25px;
    height:50px;
    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;
}

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

3 个答案: