Прокрутите div над другим div

Question

Я хочу, чтобы мои divs прокручивали друг друга, без их прокрутки вверх из экрана.

Мне это удалось с двумя div, но не могу сделать то же самое с третьим.

Я сделал пример на jsFiddle: http://jsfiddle.net/gv8GU/ Так это работает, когда вы это делаете:

#one{ 
    width: 100%; 
    height: 800px; 
    position: fixed; 

    background: gold; 
} 

#two{ 
    width: 100%; 
    height: 800px; 
    top: 800px; 
    position: relative; 

    background: goldenrod; 
} 

#three{ 
    width: 100%; 
    height: 200px; 
    top: 800px; 
    position: relative; 

    background: darkgoldenrod; 
} 

Но это работает только для первых двух див.

Итак, когда второй div (#two) прокручивается до самого верха, и вы прокручиваете дальше, я хочу, чтобы второй div оставался наверху, прокручивая третий div (#three) над вторым.

Answer 1

Извините, что ответ на вопрос о даффе - я увидел ярлык «Параллакс» и был взволнован.

Я думаю, что я понимаю, чего вы хотите - в основном, поскольку каждая «зона» поднимается наверх, она защелкивается, а следующая зона вторгается снизу.

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

Насколько я знаю, CSS не может делать то, что вы хотите - ему нужен способ ответа на позицию прокрутки, поэтому это решение Javascript.

У меня нет времени писать код только сейчас, но вам понадобится процедура инициализации, в которой хранятся исходные местоположения div. При изменении положения прокрутки вам нужно сравнить это с исходными позициями каждого div, чтобы определить, когда divs должны отображаться как фиксированные, так и in-flow.

Вам также понадобится некоторый способ резервирования вертикального пространства, когда divs фиксируются, потому что они не будут занимать какое-либо место. Попробуйте плавать влево с нулевой шириной div соответствующей высоты, очищая ее после содержимого div.

Извините, что я не смог уточнить это дальше.

P.S. Работали его на jsfiddle, http://jsfiddle.net/xtyus/1/

HTML-

<!-- 1. Items that are not in fixed position * latched * scroll normally --> 
<!-- 2. Items that go above the scroll position are given .latched --> 
<!-- 3. If they scroll down again, they lose .latched --> 
<!-- 4. div.spacer included to pad out space when content sections become latched --> 

<div class="spacer"></div> 
<div class="one"> 
    <h2>ONE</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div class="spacer"></div> 
<div class="two"> 
    <h2>TWO</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div class="spacer"></div> 
<div class="three"> 
    <h2>THREE</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div class="spacer"></div> 
<div class="four"> 
    <h2>FOUR</h2> 
    <p>Lorem ipsum</p> 
</div> 
<div style="clear: both"></div> 
<div style="height: 1000px"></div> 

CSS

.container { 
    background: black; 
    position: relative; 
} 
.spacer { 
    width: 0; 
    height: 600px; 
    float: left; 
    clear: both; 
} 
.one { background:red; width: 100%; height: 600px; position: relative; float: left; } 
.two { background: blue; width: 100%; height: 600px; position: relative; float: left; } 
.three { background: green; width: 100%; height: 600px; position: relative; float: left; } 
.four { background: yellow; width: 100%; height: 600px; position: relative; float: left; } 
.latched { position: fixed; top: 0; left: 8px; right: 8px; width: auto; } 

JAVASCRIPT (протестировано с JQuery 1.9.1)

(function($){ 
    /* Store the original positions */ 
    var d1 = $('.one'); 
    var d1orgtop = d1.position().top; 
    var d2 = $('.two'); 
    var d2orgtop = d2.position().top; 
    var d3 = $('.three'); 
    var d3orgtop = d3.position().top; 
    var d4 = $('.four'); 
    var d4orgtop = d4.position().top; 

    /* respond to the scroll event */ 
    $(window).scroll(function(){ 
     /* get the current scroll position */ 
     var st = $(window).scrollTop(); 

     /* change classes based on section positions */ 
     if (st >= d1orgtop) { 
      d1.addClass('latched'); 
     } else { 
      d1.removeClass('latched'); 
     } 
     if (st >= d2orgtop) { 
      d2.addClass('latched'); 
     } else { 
      d2.removeClass('latched'); 
     } 
     if (st >= d3orgtop) { 
      d3.addClass('latched'); 
     } else { 
      d3.removeClass('latched'); 
     } 
     if (st >= d4orgtop) { 
      d4.addClass('latched'); 
     } else { 
      d4.removeClass('latched'); 
     } 
    }); 

})(window.jQuery); 

Марк

Answer 2

Я обнаружил, что вы были немного испорчены.Он работает при изменении значения в них:

body{ 
    width: 100%; 
} 

#one{ 
    width: 100%; 
    height: 440px; 
    position: fixed; 

    background: gold; 
} 

#two{ 
    width: 100%; 
    height: 400px; 
    top: 800px; 
    position: relative; 

    background: goldenrod; 
} 

#three{ 
    width: 100%; 
    height: 430px; 
    top: 800px; 
    position: relative; 

    background: darkgoldenrod; 
} 

Это прекрасно работает, как показано здесь: http://jsfiddle.net/gv8GU/2/

Надеется, что это работает для вас, -Jcpopp

Answer 3

века поздни, но с использованием ScrollMagic будет лучший способ сделать это. Проверьте их scrollwipes раздел: http://scrollmagic.io/examples/basic/section_wipes_natural.html

Основная идея заключается в том, что вы создаете полные секции экрана, поместите их в scrollMagic сцены и использовать setPin(el), чтобы оживить их на место.

<section class="panel blue"> 
    <b>ONE</b> 
</section> 
<section class="panel turqoise"> 
    <b>TWO</b> 
</section> 
<section class="panel green"> 
    <b>THREE</b> 
</section> 
<section class="panel bordeaux"> 
    <b>FOUR</b> 
</section> 

<script> 
    $(function() { // wait for document ready 
     // init 
     var controller = new ScrollMagic.Controller({ 
      globalSceneOptions: { 
       triggerHook: 'onLeave' 
      } 
     }); 

     // get all slides 
     var slides = document.querySelectorAll("section.panel"); 

     // create scene for every slide 
     for (var i=0; i<slides.length; i++) { 
      new ScrollMagic.Scene({ 
        triggerElement: slides[i] 
       }) 
       .setPin(slides[i]) 
       .addIndicators() // add indicators (requires plugin) 
       .addTo(controller); 
     } 
    }); 
</script>