fixed text on multiple section with parallax effect

I have 4 sections and all of them have a background image. The problem is that each section has some text on it in the middle. They are supposed to be fixed i.e when we scroll, the section below the first section should overlap the section above it as well as the text on it.

I have used position fixed for ext but only the first section text is visible .

The HTML

<div class="site-body">
            <section id="section1">
                <div class="section-text1">
                    Section 1
                </div>
            </section>
            <section id="section2">
                <div class="section-text2">
                    Section 2
                </div>
            </section>
            <section id="section3">
                <div class="section-text3">
                    Section 3
                </div>
            </section>
            <section id="section4">
                <div class="section-text4">
                    Section 4
                </div>
            </section>
        </div>

The CSS

.page-wrapper .site-body #section1 {
position: relative;
width: 1024px;
height: 100%;
background-color: red;
background: url(../images/section1.jpg) no-repeat fixed;
background-position: center center;
z-index: 2000;
}
.page-wrapper .site-body #section1 .section-text1 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section2 {
position: relative;
width: 1024px;
height: 100%;
background-color: green;
background: url(../images/section2.jpg) no-repeat fixed;
background-position: center center;
z-index: 3000;
}
.page-wrapper .site-body #section2 .section-text2 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section3 {
position: relative;
width: 1024px;
height: 100%;
background-color: #ffff00;
background: url(../images/section3.jpg) no-repeat fixed;
background-position: center center;
z-index: 4000;
}
.page-wrapper .site-body #section3 .section-text3 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section4 {
position: relative;
width: 1024px;
height: 100%;
background-color: darkblue;
background: url(../images/section4.jpg) no-repeat fixed;
background-position: center center;
z-index: 5000;
}
.page-wrapper .site-body #section4 .section-text4 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}

The simple answer is that you can't do that.

When you make an element position:fixed, it's no longer going to be clipped by the overflow:hidden of it's parent.

However, you can fake it by not making the content fixed and by offsetting the content by the same amount of scrollTop.

It will simulate the effect of it being fixed.

Here's a DEMO - it does require jQuery

(There is no pure-CSS solution that I can think of.)