14

我在页面的中间有一个固定的 div。我有另一个包含图像库的 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  |  |
|===================|     |===================|
4

3 回答 3

6

在这里，我快速将 html、css 和 jquery 组合在一起，这在 Chrome 中对我有用。

jsfiddle 演示

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

希望你能明白 ;-)

于 2013-04-13T20:59:11.137 回答
4

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

于 2013-04-13T18:23:05.727 回答
2

这是解决此问题的一种方法，但它使用 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;
}
于 2013-04-14T01:15:26.087 回答