14

ページの途中に固定 div があります。画像のギャラリーを含む別の div があります。現在、画像は予想どおり固定 div の「下」にスクロールします。しかし、画像が固定divの下に決して隠されないようにする効果を目指しています。div の下に移動する代わりに、それらは分割され、画像の一部が下に表示され、一部が上に表示されます。基本的に、1 つの div (画像のギャラリーを含むもの) を 2 つの部分に分割して、固定 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

ここでは、Chrome で機能する html、css、jquery の組み合わせを簡単にまとめました。

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 イベントをリッスンしてから、必要なギャップでそれらを他方に「同期」することです。ただし、スクロールが完了するまで onscroll イベントを送信しないため、iOS デバイスの場合はある程度の低下が必要になります。

于 2013-04-13T18:23:05.727 に答える
2

これに取り組む 1 つの方法を次に示しますが、JavaScript を使用します。

JavaScript を使用して元のコンテンツを複製し、2 つのセクションに分割します。(そうすれば、2 倍のコンテンツを提供する必要はありません)

上部のセクションは下部よりも高い z-index を持ち、オーバーフローは非表示になり、位置は固定されます。高さは、ページの上部から中央の要素までの距離に設定されます。そのコンテンツは、このセクション内のラッパー div に移動され、ビューポートのように機能できるようになります。

下部セクションは上部セクションと揃えられますが、上部には中央セクションと同じパディングがあります (コンテンツをその量だけ押し下げます)。上部のセクションは上半分のコンテンツをカバーするため、中央の要素 (最も高い z インデックス) の下の部分のみが表示されます。

これに関する 1 つの問題は、トップ セクションに背景が必要であり、ページの背景と一致する必要があることです。

ここにデモをまとめました: 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 に答える