How to implement the collision of one block on the second when scrolling?

Question

css

Hello, I have 2 blocks. one is large and when the site loads, it opens to the full height and width of the page.
The second one is the same only longer. How can I make the bottom block overlap the top one when scrolling?
There is such a code, but here the parallax effect is connected and the block that is hit is twitching, can you tell me how to "kill" the parallax effect and then everything will work as it should?

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

Answer 1

One block with position:fixed;
The second with position:absolute; and the z-index is greater than the first one.
Result. The second one will scroll, the first one won't. The effect is achieved with 2 lines of css.