Разделите div на две части и покажите половину ниже фиксированного div и наполовину выше

Ответ 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());
          });
    });

Надеюсь, что вы получите эту идею; -)

Ответ 2

Это невозможно с помощью CSS. Единственная жизнеспособная реализация, которую я вижу, состоит в том, чтобы иметь верхний и нижний div с точно таким же содержимым, слушать их события onscroll, а затем "синхронизировать" их с другим с требуемым разрывом. Для устройств iOS вам потребуется некоторое ухудшение, потому что они не отправляют события onscroll до завершения прокрутки.

Ответ 3

Вот один из способов решения этого вопроса, но он использует JavaScript.

Я использую JavaScript для дублирования исходного контента и разбивки на два раздела. (таким образом вам не нужно дважды обслуживать контент)

Верхняя часть имеет более высокий индекс z, чем нижний, переполнение скрыто, а позиция фиксирована. Высота устанавливается на расстояние от верхней части страницы до среднего элемента. Его содержимое перемещается в оболочку div в этом разделе, что позволяет ему действовать как область просмотра.

Нижняя часть выровнена с верхней частью, но имеет верхнюю часть, равную средней части (нажатие содержимого вниз на эту величину). Верхняя часть покрывает содержимое верхней половины, поэтому вы видите только часть ниже среднего элемента (самый высокий z-индекс).

Одна из проблем заключается в том, что она требует, чтобы верхний раздел имел фон, который должен соответствовать фону страницы.

Я собрал здесь демо: 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;
}