Как реализовать наезд одного блока на второй при прокрутке?

Question

[Max]

Здравствуйте, у меня есть 2 блока. один большой и при загрузке сайта открывается на всю высоту и ширину страницы.
Второй такой же только длиннее. Как сделать, что-бы при прокрутке нижний блок наезжал на верхний?
Есть такой код, но тут подключен эффект параллакса и тот блок на который наезжают дергается, может подскажите как "убить" аффект параллакса и тогда все будет работать так как нужно?

var ypos, image;

    function parallex() {
        image = document.getElementById('parallaxHead');
        ypos = window.pageYOffset;
        console.log(ypos);
        image.style.top = ypos * .7 + 'px';
    }
    window.addEventListener('scroll', parallex), false;

#parallaxHead {
     position: relative;
     z-index: -1
 }
 #content {
     height: 100%;
     width: 100%;
     margin-top:-10px; 
     background-color:#fff;
     position: relative;
     z-index: 1;
 }

Comments

[Max]

В песочнице вообще не работает. https://jsfiddle.net/8e0k9brn/. Я уверен что строчки ypos = window.pageYOffset; image.style.top = ypos * .7 + 'px'; и приносят все проблемы. Но без них сайт прокручивается как обычно.

[Dartess]

Попробуйте поиграться с transition, чтобы top плавно применялся, а не резко. Возможно, избавит от аффекта.

Answer 1

[Максим Тимофеев]

Один блок с position:fixed;
Второй с position:absolute; и z-index больше, чем у первого.
Результат. Второй скролится, первый нет. Эффект достигнут 2 строчками в css.

Comments

[Max]

Ваше решение не сработало(

[Максим Тимофеев]

Max: А как Вы сделали? Кидайте код на jsFiddle.net и показывайте