Div position:fixed scrolling content mask

Fake a mask effect and position:fixed of overflow:hidden DIVs by offsetting the content.

by davidpenuelab

HTML

<div class="site-body">
            <section id="section1">
                <div class="section-text1">
                    Section 1
                    <p>Corrupti molestiae ratione totam voluptate ducimus ab qui fugit perferendis quos! Rem ipsa nostrum minus reiciendis debitis inventore nihil quod assumenda magni deserunt ratione quibusdam eius minima sequi doloribus nobis</p>
                </div>
            </section>
            <section id="section2">
                <div class="section-text2">
                    Section 2
                    <p>Nihil enim reiciendis dolores quos hic consequuntur voluptate a tempore eveniet possimus non mollitia temporibus ipsam! Culpa perspiciatis nisi itaque officiis eligendi expedita minima repellendus nostrum fugit ab qui recusandae.</p>
                </div>
            </section>
            <section id="section3">
                <div class="section-text3">
                    Section 3
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae modi natus harum nostrum fuga ab officia pariatur quaerat minima quasi. Praesentium ex sunt error. Inventore voluptatum praesentium eius neque modi.</p>
                </div>
            </section>
</div>

CSS

{
    height:100%;
}

body,html, .site-body, section{
    height:100%;
}
section{
    padding:20px;
    overflow:hidden;
}

section div{
    font-size:120px;
}

section div p{
font-size: 20px;
}

.site-body #section1 {
background: url(http://ianlunn.co.uk/plugins/jquery-parallax/images/firstBG.jpg) no-repeat fixed;
background-position: center center;
    color:white;
}
.page-wrapper .site-body #section1 .section-text1 {
position: absolute;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.site-body #section2 {
background: url(http://ianlunn.co.uk/plugins/jquery-parallax/images/secondBG.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;
}
.site-body #section3 {
background: url(http://ianlunn.co.uk/plugins/jquery-parallax/images/thirdBG.jpg) no-repeat fixed;
background-position: center center;
}

.page-wrapper .site-body #section3 .section-text3 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}

JavaScript

$(window).scroll(function(){
    $("section div").each(function(){
    $(this).css('margin-top',$(window).scrollTop()-$(this).parent().position().top);
        console.log();
    });
});